Swiper slider увеличивается сам по себе

Рейтинг: 1Ответов: 1Опубликовано: 15.04.2023

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

// Инициализация превью слайдера
const sliderThumbs = new Swiper('.slider__thumbs .swiper-container', { // ищем слайдер превью по селектору
    // задаем параметры
    direction: 'vertical', // вертикальная прокрутка
    slidesPerView: 3, // показывать по 3 превью
    spaceBetween: 24, // расстояние между слайдами
    mousewheel: true,
    navigation: { // задаем кнопки навигации
        nextEl: '.slider__next', // кнопка Next
        prevEl: '.slider__prev' // кнопка Prev
    },
    freeMode: true, // при перетаскивании превью ведет себя как при скролле
});
// Инициализация слайдера изображений
const sliderImages = new Swiper('.slider__images .swiper-container', { // ищем слайдер превью по селектору
    // задаем параметры
    direction: 'vertical', // вертикальная прокрутка
    slidesPerView: 1, // показывать по 1 изображению
    spaceBetween: 32, // расстояние между слайдами
    navigation: { // задаем кнопки навигации
        nextEl: '.slider__next', // кнопка Next
        prevEl: '.slider__prev' // кнопка Prev
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
    thumbs: { // указываем на превью слайдер
        swiper: sliderThumbs // указываем имя превью слайдера
    },
});
body {
    background: #121212;
  }
  
  .slider {
    padding: 32px;
    color: #fff;
  }
  
  .slider .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .slider__flex {
    display: flex;
    justify-content: center;
  }

  .slider__col {
    display: flex;
    flex-direction: column;
    width: 150px;
    margin-right: 32px;
  }
  .slider__prev {
    transform: rotate(180deg);
  }
  
  .slider__prev,
  .slider__next {
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .slider__prev:focus,
  .slider__next:focus {
    outline: none;
  }
  .slider__thumbs {
    height: 556px;
    position: relative;
  }
  
  .slider__images {
    height: 556px;
  }
 
  
  .slider__image {
    width: 100%;
    height: 100%;
    overflow: hidden;

  }
  .slider__image img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  .swiper-pagination-bullet {
    display: inline-block;
    height: 4px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 100px;
    margin-right: 7px;
  }

  .swiper-pagination-bullet:last-child {
    margin-right: 0;
  }

  .swiper-pagination {
    position: absolute;
    width: 440px;
    display: flex;
    justify-content: center;
    bottom: -81px;
    margin: 0px 9px;
  }

  .swiper-pagination-bullet-active {
    background: linear-gradient(88.01deg, #730000 -9.57%, #FF0000 115.37%);
  }
<head>
    <linkn rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="./css/style.css">
</head>

<section class="slider">
        <div class="slider__flex">
          <div class="slider__col">
      
            <div class="slider__prev"></div> <!-- Кнопка для переключения на предыдущий слайд -->
      
            <div class="slider__thumbs">
              <div class="swiper-container"> <!-- Слайдер с превью -->
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="slider__image"><img src="./image/Group 536.png" alt=""/></div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slider__image"><img src="./image/Group 536.png" alt=""/></div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slider__image"><img src="./image/Group 536.png" alt=""/></div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slider__image"><img src="./image/Group 536.png" alt=""/></div>
                  </div>
                  <div class="swiper-slide">
                    <div class="slider__image"><img src="./image/Group 536.png" alt=""/></div>
                  </div>
                </div>
              </div>
            </div>
      
            <div class="slider__next"></div> <!-- Кнопка для переключения на следующий слайд -->
      
          </div>
      
          <div class="slider__images">
            <div class="swiper-container"> <!-- Слайдер с изображениями -->
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slider__image"><img src="./image/Group 535.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="slider__image"><img src="./image/Group 535.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="slider__image"><img src="./image/Group 535.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="slider__image"><img src="./image/Group 535.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="slider__image"><img src="./image/Group 535.png" alt=""/></div>
                </div>
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
      
        </div>
    </section>

css html swiper.js slider
Источник: Stack Overflow на русском

Ответы

▲ 0

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

Чтобы решить эту проблему, вам нужно изменить параметры слайдеров на горизонтальную прокрутку. Для этого замените direction: 'vertical' на direction: 'horizontal' в обоих инициализациях слайдеров:

const sliderThumbs = new Swiper('.slider__thumbs .swiper-container', {
  direction: 'horizontal',

});

const sliderImages = new Swiper('.slider__images .swiper-container', {
  direction: 'horizontal',
  
});