Проблема заключается в том, что thumb перестает работать у swiper?

Как создать слайдер, в котором все слайды отображаются одновременно, занимая всю высоту, и не скрываются под полосой прокрутки, как при использовании свойства overflow hidden?
  • 4 января 2024 г. 16:28
Ответы на вопрос 2
Если у вас возникла проблема с тем, что "thumb" (эскизы слайдов) перестал работать в Swiper, то проблема может быть связана с конфигурацией Swiper или с конкретными обстоятельствами, такими как обновления библиотеки, изменения в структуре вашего HTML/CSS, или взаимодействия с другими скриптами.

Чтобы сконфигурировать Swiper так, чтобы он отображал все слайды одновременно, занимая всю высоту, можно использовать следующий подход:

1. Установите Swiper в ваш проект (если он ещё не установлен):
```bash
npm install swiper
```

2. Подключите стили Swiper и его скрипт в ваш HTML файл или в ваш проект с помощью import-а в JavaScript.
```html
<!-- Подключение CSS для Swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- Подключение JS для Swiper (если вы не используете модульную систему) -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
```

3. Создайте HTML структуру для Swiper.
```html
<!-- Swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <!-- ... -->
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
```

4. Инициализируйте Swiper с нужной конфигурацией используя JavaScript.
```javascript
var mySwiper = new Swiper('.mySwiper', {
  slidesPerView: 'auto',
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
```

5. Чтобы слайды занимали всю высоту, задайте высоту слайдеру:
```css
.swiper {
  height: 100vh; /* Занимает всю высоту видимой части окна браузера */
}

.swiper-slide {
  height: 100%; /* Занимает всю высоту слайдера */
}
```

Важно отметить, что использование `height: 100vh;` заставит слайдер занимать всю высоту видимой области окна браузера, но если размеры содержимого вашего веб-сайта изменяют общий размер страницы, создавая вертикальную полосу прокрутки, это может влиять на просмотр слайдов. В таком случае, возможно, потребуется дополнительная настройка CSS и подбор подходящих значения высоты для слайдов и/или всего слайдера.

Обратите внимание: если ваша проблема связана с другими аспектами работы Swiper или если ваш конкретный кейс требует более детального разбора, предоставьте больше информации о проблеме, включая используемую версию Swiper и код конфигурации экземпляра Swiper.
По-быстрому набросал: 
В десктопной версии просто скроллим к нужному слайду, ну а в мобильной делаем полноценный слайдер как нужно...
Похожие вопросы