Swiper как центрировать слайд?

CSS JavaScript Swiper

1 ответ

Добрый день, у меня возникла проблема, что на мобильной версии я в breakpoints поставил отображение одного слайда, но отображается полтора

Код слайдера:

var swiper = new Swiper(".reviews-slider", {     slidesPerView: 3,     spaceBetween: 30,     navigation: {         nextEl: ".swiper-button-next",         prevEl: ".swiper-button-prev",     },     breakpoints: {         320: {             slidesPerView: 1,             center         },         678: {             slidesPerView: 2         },         1120: {             slidesPerView: 3         }     } });

var swiper = new Swiper(".reviews-slider", { slidesPerView: 3, spaceBetween: 30, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 320: { slidesPerView: 1, center }, 678: { slidesPerView: 2 }, 1120: { slidesPerView: 3 } } });

Верстка:

&lt;div class="reviews__slider-box"&gt;                             &lt;div class="swiper reviews-slider"&gt;                                 &lt;div class="swiper-wrapper reviews__wrapper"&gt;                                     &lt;div class="swiper-slide reviews__slide"&gt;                                         &lt;div class="reviews__slide-top"&gt;                                             &lt;img src="./assets/img/rew-1.png" alt="User" class="reviews__slide-user"&gt;                                             &lt;div class="reviews__slide-box"&gt;                                                 &lt;h3 class="reviews__slide-name"&gt;Rozina Wossala&lt;/h3&gt;                                                 &lt;p class="reviews__slide-login"&gt;@rozinawossala&lt;/p&gt;                                             &lt;/div&gt;                                         &lt;/div&gt;                                         &lt;div class="reviews__slide-content"&gt;                                             &lt;p class="reviews__slide-text"&gt;                                                 @spartisan budapest                                                 AZ EGÉSZ EGY SZUPERCUKI SZIVVEL - LÉLEKKEL ÖSSZERAKOTT                                                 CSALADIVALLALKOZÁS. (a képen toboztea :)                                             &lt;/p&gt;                                         &lt;/div&gt;                                         &lt;button class="reviews__slide-more"&gt;&lt;img src="./assets/img/rew-btn.svg"                                                 alt="svg" class="reviews__btn-img"&gt;&lt;/button&gt;                                     &lt;/div&gt;                                     &lt;div class="swiper-slide reviews__slide"&gt;                                         &lt;div class="reviews__slide-top"&gt;                                             &lt;img src="./assets/img/rew-2.png" alt="User" class="reviews__slide-user"&gt;                                             &lt;div class="reviews__slide-box"&gt;                                                 &lt;h3 class="reviews__slide-name"&gt;kerimmate&lt;/h3&gt;                                                 &lt;p class="reviews__slide-login"&gt;@kerimmate &lt;/p&gt;                                             &lt;/div&gt;                                         &lt;/div&gt;                                         &lt;div class="reviews__slide-content"&gt;                                             &lt;p class="reviews__slide-text"&gt;                                                 Best Sauna experience Thanks to my friend @medvedyev_sergey And the                                                 @spartisan_budapest.                                             &lt;/p&gt;                                         &lt;/div&gt;                                         &lt;button class="reviews__slide-more"&gt;&lt;img src="./assets/img/rew-btn.svg"                                                 alt="svg" class="reviews__btn-img"&gt;&lt;/button&gt;                                     &lt;/div&gt;                                     &lt;div class="swiper-slide reviews__slide"&gt;                                         &lt;div class="reviews__slide-top"&gt;                                             &lt;img src="./assets/img/rew-3.png" alt="User" class="reviews__slide-user"&gt;                                             &lt;div class="reviews__slide-box"&gt;                                                 &lt;h3 class="reviews__slide-name"&gt;Tamás Sas&lt;/h3&gt;                                                 &lt;p class="reviews__slide-login"&gt;@t_sasss&lt;/p&gt;                                             &lt;/div&gt;                                         &lt;/div&gt;                                         &lt;div class="reviews__slide-content"&gt;                                             &lt;p class="reviews__slide-text"&gt;                                                 Koszonom a vendéslátás barávom, Imádiam!                                                 és a megér demelt relax                                             &lt;/p&gt;                                         &lt;/div&gt;                                         &lt;button class="reviews__slide-more"&gt;&lt;img src="./assets/img/rew-btn.svg"                                                 alt="svg" class="reviews__btn-img"&gt;&lt;/button&gt;                                     &lt;/div&gt;                                     &lt;div class="swiper-slide reviews__slide"&gt;                                         &lt;div class="reviews__slide-top"&gt;                                             &lt;img src="./assets/img/rew-1.png" alt="User" class="reviews__slide-user"&gt;                                             &lt;div class="reviews__slide-box"&gt;                                                 &lt;h3 class="reviews__slide-name"&gt;Rozina Wossala&lt;/h3&gt;                                                 &lt;p class="reviews__slide-login"&gt;@rozinawossala&lt;/p&gt;                                             &lt;/div&gt;                                         &lt;/div&gt;                                         &lt;/div&gt;                                         &lt;div class="reviews__slide-content"&gt;                                             &lt;p class="reviews__slide-text"&gt;                                                 @spartisan budapest                                                 AZ EGÉSZ EGY SZUPERCUKI SZIVVEL - LÉLEKKEL ÖSSZERAKOTT                                                 CSALADIVALLALKOZÁS. (a képen toboztea :)                                             &lt;/p&gt;                                         &lt;/div&gt;                                         &lt;button class="reviews__slide-more"&gt;&lt;img src="./assets/img/rew-btn.svg"                                                 alt="svg" class="reviews__btn-img"&gt;&lt;/button&gt;                                     &lt;/div&gt;                                 &lt;/div&gt;                             &lt;/div&gt;                             &lt;div class="swiper-button-next"&gt;&lt;/div&gt;                             &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;                         &lt;/div&gt;

<div class="reviews__slider-box"> <div class="swiper reviews-slider"> <div class="swiper-wrapper reviews__wrapper"> <div class="swiper-slide reviews__slide"> <div class="reviews__slide-top"> <img src="./assets/img/rew-1.png" alt="User" class="reviews__slide-user"> <div class="reviews__slide-box"> <h3 class="reviews__slide-name">Rozina Wossala</h3> <p class="reviews__slide-login">@rozinawossala</p> </div> </div> <div class="reviews__slide-content"> <p class="reviews__slide-text"> @spartisan budapest AZ EGÉSZ EGY SZUPERCUKI SZIVVEL - LÉLEKKEL ÖSSZERAKOTT CSALADIVALLALKOZÁS. (a képen toboztea :) </p> </div> <button class="reviews__slide-more"><img src="./assets/img/rew-btn.svg" alt="svg" class="reviews__btn-img"></button> </div> <div class="swiper-slide reviews__slide"> <div class="reviews__slide-top"> <img src="./assets/img/rew-2.png" alt="User" class="reviews__slide-user"> <div class="reviews__slide-box"> <h3 class="reviews__slide-name">kerimmate</h3> <p class="reviews__slide-login">@kerimmate </p> </div> </div> <div class="reviews__slide-content"> <p class="reviews__slide-text"> Best Sauna experience Thanks to my friend @medvedyev_sergey And the @spartisan_budapest. </p> </div> <button class="reviews__slide-more"><img src="./assets/img/rew-btn.svg" alt="svg" class="reviews__btn-img"></button> </div> <div class="swiper-slide reviews__slide"> <div class="reviews__slide-top"> <img src="./assets/img/rew-3.png" alt="User" class="reviews__slide-user"> <div class="reviews__slide-box"> <h3 class="reviews__slide-name">Tamás Sas</h3> <p class="reviews__slide-login">@t_sasss</p> </div> </div> <div class="reviews__slide-content"> <p class="reviews__slide-text"> Koszonom a vendéslátás barávom, Imádiam! és a megér demelt relax </p> </div> <button class="reviews__slide-more"><img src="./assets/img/rew-btn.svg" alt="svg" class="reviews__btn-img"></button> </div> <div class="swiper-slide reviews__slide"> <div class="reviews__slide-top"> <img src="./assets/img/rew-1.png" alt="User" class="reviews__slide-user"> <div class="reviews__slide-box"> <h3 class="reviews__slide-name">Rozina Wossala</h3> <p class="reviews__slide-login">@rozinawossala</p> </div> </div> </div> <div class="reviews__slide-content"> <p class="reviews__slide-text"> @spartisan budapest AZ EGÉSZ EGY SZUPERCUKI SZIVVEL - LÉLEKKEL ÖSSZERAKOTT CSALADIVALLALKOZÁS. (a képen toboztea :) </p> </div> <button class="reviews__slide-more"><img src="./assets/img/rew-btn.svg" alt="svg" class="reviews__btn-img"></button> </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>

Дополнительно:

Скорей всего padding или margin сдигает слайд, center в breakpoints писать не нужно.

Dimka59, нет с падингами и манджином все нормально, проверял

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Антон С. Ответ

Для центрирования слайда в Swiper, вам следует использовать параметр `centeredSlides`, который позволяет центрировать активный слайд на странице.

Пример кода:

var mySwiper = new Swiper('.swiper-container', {
  centeredSlides: true,
  // Другие параметры и настройки
});

var mySwiper = new Swiper('.swiper-container', { centeredSlides: true, // Другие параметры и настройки });

Кроме того, вы также можете использовать параметр `slidesPerView` для определения количества слайдов, отображаемых на экране. Например, если вы хотите отображать только один слайд на экране и центрировать его, вы можете установить `slidesPerView: 1`.

Пример кода:

var mySwiper = new Swiper('.swiper-container', {
  centeredSlides: true,
  slidesPerView: 1,
  // Другие параметры и настройки
});

var mySwiper = new Swiper('.swiper-container', { centeredSlides: true, slidesPerView: 1, // Другие параметры и настройки });

Таким образом, с использованием параметров `centeredSlides` и `slidesPerView` вы сможете центрировать слайд в Swiper и настроить отображение слайдов на странице по вашему усмотрению.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Swiper как центрировать слайд?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно