Swiper разместить несколько слайдов по центру

252

07 сентября 2021, 10:20

Есть пример на codepen

Нужно сделать так, чтобы видимые фото были по центру, то есть так:

centeredSlides не помог - он только одно фото центрирует. Как сделать так, чтобы было как на картинке?

Answer 1

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="https://www.artleo.com/mini/201804/422815.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://cache.desktopnexus.com/thumbseg/2040/2040636-bigthumbnail.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://www.rusdialog.ru/images/news/news_view/5107a4952d8cf8344551a6c9f4f80d0b.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://cache.desktopnexus.com/thumbseg/2040/2040636-bigthumbnail.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://www.rusdialog.ru/images/news/news_view/5107a4952d8cf8344551a6c9f4f80d0b.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://cache.desktopnexus.com/thumbseg/2040/2040636-bigthumbnail.jpg" alt=""></div>
            <div class="swiper-slide"><img src="https://www.rusdialog.ru/images/news/news_view/5107a4952d8cf8344551a6c9f4f80d0b.jpg" alt=""></div>
        </div>
    
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

.swiper-slide img{
  max-width: 100%;
}
.swiper-slide {
  text-align: center;
}

let mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 2,
});