Swiper. Если убрать centeredSlides слайдер не корректно работает, почему так происходит и как можно решить эту проблему?

Question

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

 let galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
            loop: true,
            loopedSlides: 4
    });
    let galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      //centeredSlides: true,//
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
            loop: true,
            loopedSlides: 4
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
    height: 300px;
}
.swiper-container {
        width: 100%;
        height: 300px;
        margin: 20px auto;
}

.swiper-slide-container {
  text-align: center;
    font-size: 18px;
    background: #fff;
  height:100%;
  max-width: 600px;
  margin:auto;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

.gallery-top {
        height: 80%;
        width: 100%;
}
.gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
        width: 20%;
        height: 100%;
        opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
        opacity: 1;
}

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>

<!-- Swiper -->
<body>
    <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
            </div>
    </div>
</body>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Swiper. Если убрать centeredSlides слайдер не корректно работает, почему так происходит и как можно решить эту проблему?

Ответы (0 шт):