Thumbs next — пример

Пример: .thumbs-next

/* Базовая верстка контейнера */ .thumbs-wrapper { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px; background: #f7f7f7; } /* Сбрасываем браузерные различия у кнопок и фиксируем размеры */ .thumbs-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; /* важно — чтобы кнопка не сжималась */ padding: 0; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #222; font: inherit; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; vertical-align: middle; } /* Стили иконки внутри кнопки */ .thumbs-btn .icon { display: inline-block; font-size: 18px; user-select: none; } /* Отключённое состояние: класс, атрибут disabled или класс от Swiper */ .thumbs-btn[disabled], .thumbs-btn.swiper-button-disabled { opacity: 0.45; cursor: default; pointer-events: none; } /* Слайды: чтобы трансформ на swiper-wrapper не влиял на кнопки */ .swiper { overflow: hidden; width: 460px; /* показываем несколько thumbs */ } .swiper-wrapper { display: flex; transition: transform 0.3s ease; will-change: transform; } .swiper-slide img { display: block; width: 100%; height: auto; border-radius: 6px; object-fit: cover; } // Небольшой демо-скрипт, показывающий смену состояния кнопки const next = document.querySelector('.thumbs-next'); const prev = document.querySelector('.thumbs-prev'); // По клику включаем/выключаем disabled, чтобы вы увидели отличия в стилях prev.addEventListener('click', () => { if (next.disabled) { next.disabled = false; next.classList.remove('swiper-button-disabled'); next.setAttribute('tabindex', '0'); next.setAttribute('aria-disabled', 'false'); } else { next.disabled = true; next.classList.add('swiper-button-disabled'); next.setAttribute('tabindex', '-1'); next.setAttribute('aria-disabled', 'true'); } }); ПОЧЕМУ .thumbs-next "меняется" и КАК ЭТО ИСПРАВИТЬ ------------------------------------------------- 1) Причины: - .thumbs-next в вашем примере уже является элементом