Ставлю в Swiper показывать один слайд, но на деле показывает полтора слайда, почему?
Добрый день, возникла проблема со слайдером, хочу что бы отображался на мобильной версии один слайд, но на деле показывает полтора, скрин:
Вот сам слайдер на codepen: https://codepen.io/Bazli/pen/OJaqZma
Код слайдера:
var swiper = new Swiper(".reviews-slider", { slidesPerView: 1, spaceBetween: 30, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 768: { slidesPerView: 2, }, 1100: { slidesPerView: 3, }, } }); |
var swiper = new Swiper(".reviews-slider", { slidesPerView: 1, spaceBetween: 30, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 768: { slidesPerView: 2, }, 1100: { slidesPerView: 3, }, } });
Html слайдера:
<div class="reviews__slider-box"> <div class="swiper reviews-slider"> <div class="swiper-wrapper reviews__wrapper"> <div class="swiper-slide reviews__slide"> ...Контент... </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> |
<div class="reviews__slider-box"> <div class="swiper reviews-slider"> <div class="swiper-wrapper reviews__wrapper"> <div class="swiper-slide reviews__slide"> ...Контент... </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
Дополнительно:
Значит, какие-то противоречия в стилях.
Пока вы не сделаете демку с видимой проблемой на codepen.io, дублировать каждый день вопрос - бесполезно.
Теперь вспоминаем как считается ширина. Использовать calc не удобно, потому что width рассчитывает слайдер. Значит, меняем box-sizing и получаем желаемое.
Ещё убираем width 100%, потому что не ясно зачем это вообще.
Заодно можно и с высотой разобраться.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, скорее всего связана с настройками Swiper. Полтора слайда может показываться из-за того, что у вас заданы определенные параметры, которые влияют на отображение слайдов.
Чтобы исправить эту проблему, вам необходимо убедиться, что параметр slidesPerView установлен на 1. Этот параметр определяет количество слайдов, которые будут отображаться одновременно. Установка его на 1 гарантирует, что будет отображаться только один слайд.
Пример кода для установки slidesPerView на 1 выглядит следующим образом:
var swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 30, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });
Кроме того, убедитесь, что вы не используете другие параметры, которые могут влиять на количество отображаемых слайдов, такие как slidesPerGroup или slidesPerColumn.
Если проблема сохраняется, попробуйте также обновить версию Swiper до последней доступной, возможно в более новой версии проблема уже была исправлена.
Надеюсь, это поможет вам решить проблему с отображением слайдов в Swiper. Если у вас остались дополнительные вопросы, не стесняйтесь задавать.