diff --git a/views/css/everblock.css b/views/css/everblock.css
index 6827a55..a1ec74c 100644
--- a/views/css/everblock.css
+++ b/views/css/everblock.css
@@ -1048,7 +1048,7 @@
 }
 
 .ever-slider-item {
-    transition: opacity 0.4s ease, filter 0.4s ease;
+    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
     opacity: 1;
     filter: none;
 }
@@ -1059,8 +1059,13 @@
 }
 
 .ever-slider-item.is-inactive {
+    opacity: 0.4;
+    filter: brightness(0.85);
+}
+
+.ever-slider-item.is-adjacent {
     opacity: 0.6;
-    filter: grayscale(10%) brightness(0.95);
+    filter: brightness(0.9);
 }
 
 .ever-slider-prev,
@@ -1083,11 +1088,11 @@
 }
 
 .ever-slider-prev {
-    left: 10px;
+    left: -40px;
 }
 
 .ever-slider-next {
-    right: 10px;
+    right: -40px;
 }
 
 .ever-slider-prev:hover,
diff --git a/views/js/everblock-slider.js b/views/js/everblock-slider.js
index a799dc7..d12ac25 100644
--- a/views/js/everblock-slider.js
+++ b/views/js/everblock-slider.js
@@ -49,11 +49,6 @@
         if (!state.prevButton || !state.nextButton) {
             return;
         }
-        if (state.disabled) {
-            state.prevButton.hidden = true;
-            state.nextButton.hidden = true;
-            return;
-        }
         state.prevButton.hidden = false;
         state.nextButton.hidden = false;
         if (state.infinite) {
@@ -61,7 +56,12 @@
             state.nextButton.disabled = false;
             return;
         }
-        state.prevButton.disabled = state.index === 0;
+        if (state.disabled) {
+            state.prevButton.disabled = true;
+            state.nextButton.disabled = true;
+            return;
+        }
+        state.prevButton.disabled = state.index <= 0;
         state.nextButton.disabled = state.index >= state.maxIndex;
     }
 
@@ -69,15 +69,19 @@
         if (!state.track) {
             return;
         }
-        const offset = (state.itemWidth + state.gap) * state.index;
-        state.track.style.transform = `translateX(${-offset}px)`;
+        const containerWidth = state.containerWidth || state.slider.clientWidth || 0;
+        const step = state.itemWidth + state.gap;
+        const offset = (containerWidth / 2) - (state.itemWidth / 2) - (state.index * step);
+        state.track.style.transform = `translateX(${offset}px)`;
     }
 
     function updateItemStates(state) {
         state.items.forEach((item, itemIndex) => {
             const isActive = itemIndex === state.index;
+            const isAdjacent = itemIndex === state.index - 1 || itemIndex === state.index + 1;
             item.classList.toggle('is-active', isActive);
-            item.classList.toggle('is-inactive', !isActive);
+            item.classList.toggle('is-adjacent', !isActive && isAdjacent);
+            item.classList.toggle('is-inactive', !isActive && !isAdjacent);
         });
     }
 
@@ -87,18 +91,19 @@
         state.itemsPerView = Math.max(1, state.itemsPerView);
         state.gap = getGapValue(state.track);
         const containerWidth = state.slider.clientWidth || 0;
+        state.containerWidth = containerWidth;
         const totalGap = state.gap * Math.max(0, state.itemsPerView - 1);
         state.itemWidth = state.itemsPerView > 0 ? (containerWidth - totalGap) / state.itemsPerView : 0;
         state.items.forEach((item) => {
             item.style.width = `${state.itemWidth}px`;
         });
-        state.maxIndex = Math.max(0, totalItems - state.itemsPerView);
-        state.disabled = totalItems <= 1 || state.itemsPerView >= totalItems;
+        state.maxIndex = Math.max(0, totalItems - 1);
+        state.disabled = totalItems <= 1;
         if (state.index > state.maxIndex) {
             state.index = state.maxIndex;
         }
-        state.pageCount = state.disabled ? 1 : Math.ceil(totalItems / state.itemsPerView);
-        state.pageIndex = Math.min(state.pageCount - 1, Math.round(state.index / state.itemsPerView));
+        state.pageCount = state.disabled ? 1 : totalItems;
+        state.pageIndex = Math.min(state.pageCount - 1, state.index);
         updateTrackPosition(state);
         updateItemStates(state);
         updateButtons(state);
@@ -117,7 +122,7 @@
             return;
         }
         state.timer = window.setInterval(() => {
-            goToIndex(state, state.index + state.itemsPerView, false);
+            goToIndex(state, state.index + 1, false);
         }, state.autoplayDelay);
     }
 
@@ -134,7 +139,7 @@
             targetIndex = Math.max(0, Math.min(state.maxIndex, targetIndex));
         }
         state.index = targetIndex;
-        state.pageIndex = Math.min(state.pageCount - 1, Math.round(state.index / state.itemsPerView));
+        state.pageIndex = Math.min(state.pageCount - 1, state.index);
         updateTrackPosition(state);
         updateItemStates(state);
         updateButtons(state);
@@ -146,12 +151,12 @@
     function bindControls(state) {
         if (state.prevButton) {
             state.prevButton.addEventListener('click', () => {
-                goToIndex(state, state.index - state.itemsPerView, true);
+                goToIndex(state, state.index - 1, true);
             });
         }
         if (state.nextButton) {
             state.nextButton.addEventListener('click', () => {
-                goToIndex(state, state.index + state.itemsPerView, true);
+                goToIndex(state, state.index + 1, true);
             });
         }
     }