Перестает работать thumb у swiper?

CSS HTML JavaScript

10 марта 2026 1 ответ

Есть два слайдера. Один слайдер имеет особенность: отображены все слайды разом во всю высоту и при обычном скролле страницы слайды не уходят под полотно страницы, как было бы со свойством overflow hidden. А просто отображаются единой группой.

Второй сладйер - это thumb. Проблема заключается в том, что если сделать высоту

.swiper {
width: 100%;
height: 100vh;
}

то thumb работает, но тогда теряется особенность слайдера. Они перестают отображаться во всю высоту, а так нельзя. Как сделать так, чтобы как на пример https://brandshop.ru/goods/452209/np0a4hvg176/
Вот верстка

&lt;div thumbsSlider="" class="swiper productCardThumb"&gt;                   &lt;div class="swiper-wrapper"&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__thumb"&gt;                         &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__thumb"&gt;                         &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__thumb"&gt;                         &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__thumb"&gt;                         &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__thumb"&gt;                         &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__thumb"&gt;                         &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__thumb"&gt;                         &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                       &lt;/div&gt;                     &lt;/div&gt;                   &lt;/div&gt;                 &lt;/div&gt;                 &lt;div class="swiper productCard"&gt;                   &lt;div class="swiper-wrapper"&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__slide"&gt;                         &lt;div class="swiper-zoom-container"&gt;                           &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                         &lt;/div&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__slide"&gt;                         &lt;div class="swiper-zoom-container"&gt;                           &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                         &lt;/div&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__slide"&gt;                         &lt;div class="swiper-zoom-container"&gt;                           &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                         &lt;/div&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__slide"&gt;                         &lt;div class="swiper-zoom-container"&gt;                           &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                         &lt;/div&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__slide"&gt;                         &lt;div class="swiper-zoom-container"&gt;                           &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                         &lt;/div&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__slide"&gt;                         &lt;div class="swiper-zoom-container"&gt;                           &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                         &lt;/div&gt;                       &lt;/div&gt;                     &lt;/div&gt;                     &lt;div class="swiper-slide"&gt;                       &lt;div class="block-product__slide"&gt;                         &lt;div class="swiper-zoom-container"&gt;                           &lt;img alt="" src="../../assets/img/unicorn.jpg"&gt;                         &lt;/div&gt;                       &lt;/div&gt;                     &lt;/div&gt;                   &lt;/div&gt;                   &lt;div class="swiper-pagination"&gt;&lt;/div&gt;                 &lt;/div&gt;

Вот стили

.block-product {   padding: 50px;    &amp;__content {     display: flex;     width: 100%;     justify-content: space-between;   }    &amp;__img {     width: 75%;     display: flex;     justify-content: space-between;   }    &amp;__info {     width: 20%;     background-color: blue;     height: 400px;     position: sticky;     top: 100px;   }    &amp;__thumbs {}    &amp;__slider {}    &amp;__slide {     cursor: zoom-in;     overflow: hidden;      img {       height: 700px !important;     }   } }  .swiper {   width: 100%;   height: 100%; }  .swiper-slide {   text-align: center;   font-size: 18px;   display: flex;   justify-content: center;   align-items: center;   flex-shrink: 1; }  .swiper-slide img {   display: block;   width: 100%;   height: 100%;   object-fit: cover; }  // .productCard .swiper-slide { //   width: auto; //   height: auto !important; // }  .productCardThumb {   position: sticky;   top: 100px;   width: 75px;   height: max-content; }  .productCardThumb .swiper-slide-thumb-active {   filter: brightness(0.9) !important;   transition: 0.2s;    img {     border-radius: 10px;   } }  .productCardThumb .swiper-slide {   filter: brightness(1);   width: 65px;   height: auto !important; }  .productCardThumb .swiper-slide:last-child {   margin-bottom: 0 !important; }

.block-product { padding: 50px; &__content { display: flex; width: 100%; justify-content: space-between; } &__img { width: 75%; display: flex; justify-content: space-between; } &__info { width: 20%; background-color: blue; height: 400px; position: sticky; top: 100px; } &__thumbs {} &__slider {} &__slide { cursor: zoom-in; overflow: hidden; img { height: 700px !important; } } } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; flex-shrink: 1; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } // .productCard .swiper-slide { // width: auto; // height: auto !important; // } .productCardThumb { position: sticky; top: 100px; width: 75px; height: max-content; } .productCardThumb .swiper-slide-thumb-active { filter: brightness(0.9) !important; transition: 0.2s; img { border-radius: 10px; } } .productCardThumb .swiper-slide { filter: brightness(1); width: 65px; height: auto !important; } .productCardThumb .swiper-slide:last-child { margin-bottom: 0 !important; }

Вот js

require('../../assets/scss/main.scss'); require('./page.scss'); import Swiper, { Autoplay, FreeMode, Mousewheel, Zoom, Thumbs } from 'swiper';  Swiper.use([Autoplay, FreeMode, Mousewheel, Zoom, Thumbs]);  document.addEventListener('DOMContentLoaded', () =&gt; {     const productCardThumb = new Swiper('.productCardThumb', {         slidesPerView: 'auto',         direction: 'vertical',         spaceBetween: 10,         freeMode: {             enabled: true         },         watchSlidesVisibility: true,         watchSlidesProgress: true,     });      const productCard = new Swiper('.productCard', {         zoom: true,         slidesPerView: 'auto',         direction: 'vertical',         spaceBetween: 30,         thumbs: {             swiper: productCardThumb,         },         freeMode: true,         mousewheel: {             forceToAxis: true         },     }); });

require('../../assets/scss/main.scss'); require('./page.scss'); import Swiper, { Autoplay, FreeMode, Mousewheel, Zoom, Thumbs } from 'swiper'; Swiper.use([Autoplay, FreeMode, Mousewheel, Zoom, Thumbs]); document.addEventListener('DOMContentLoaded', () => { const productCardThumb = new Swiper('.productCardThumb', { slidesPerView: 'auto', direction: 'vertical', spaceBetween: 10, freeMode: { enabled: true }, watchSlidesVisibility: true, watchSlidesProgress: true, }); const productCard = new Swiper('.productCard', { zoom: true, slidesPerView: 'auto', direction: 'vertical', spaceBetween: 30, thumbs: { swiper: productCardThumb, }, freeMode: true, mousewheel: { forceToAxis: true }, }); });

вот пример как должно быть https://brandshop.ru/goods/452209/np0a4hvg176/

Дополнительно:

Покажите свою реализацию в песочнице https://codepen.io/

Виталий Першин, https://codepen.io/nasekined/pen/gOEPzWm

По-быстрому набросал:
snippet
В десктопной версии просто скроллим к нужному слайду, ну а в мобильной делаем полноценный слайдер как нужно...

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Мария Код Ответ

13 марта 2026 в 07:20

Для того чтобы разобраться, почему перестал работать thumb у swiper, нужно пройти несколько шагов для диагностики проблемы.

1. Проверьте версию swiper: убедитесь, что у вас установлена последняя версия библиотеки swiper. Возможно, проблема связана с устаревшей версией, в которой были исправлены баги.

2. Проверьте наличие необходимых файлов и зависимостей: убедитесь, что у вас подключены все необходимые файлы и зависимости для работы swiper, включая стили и скрипты.

3. Проверьте наличие ошибок в консоли браузера: откройте консоль разработчика в браузере и посмотрите, есть ли какие-либо ошибки или предупреждения, связанные с работой swiper. Это может помочь определить причину проблемы.

4. Проверьте настройки swiper: убедитесь, что вы правильно настроили swiper и thumb в соответствии с документацией. Возможно, что проблема заключается в неправильных параметрах и настройках.

5. Проверьте HTML структуру: убедитесь, что структура HTML элементов для swiper и thumb правильная и соответствует требованиям библиотеки. Например, проверьте правильность классов и идентификаторов.

Если после выполнения всех этих шагов проблема с thumb у swiper не была решена, попробуйте создать минимальный пример кода, который демонстрирует проблему, и задайте вопрос на форуме или в сообществе, специализирующемся на библиотеке swiper. Приложите к вопросу все необходимые детали и код для более точного анализа проблемы.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов 1С-Битрикс Можно ли быстро сделать зеркало сайта на связке Битрикс+Аспро с другими настройками? 0 ответов

Перестает работать thumb у swiper?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно