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

241
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,
});
READ ALSO
Как сравнить элемент массива с элементами заданного массива?

Как сравнить элемент массива с элементами заданного массива?

У меня есть массив из символов: char cif[] = { '0','1','2','3','4','5','6','7','8','9', ',','', '/', ';'};

168
Чтение из файла в массивы

Чтение из файла в массивы

Есть файл с таким набором точек:

84
Перезапись строки в файле

Перезапись строки в файле

Суть данной функции, дописывать в определенную строку вводимые данныеСтрока разделена разделителем "=" на две подстроки: первая - это два...

114
Динамическая память/С++

Динамическая память/С++

Недавно начал изучать с++И в процессе возник вопрос, а именно о том чем nullptr отличается от NULL?

117