Swiper JS - показать часть следующего слайда

Question

Swiper JS - показать часть следующего слайда

Я хочу показать часть второго слайда. Примерно 20-30%. Я установил для slidesPerView значение 2.1 (на мобильных устройствах!), Чтобы показать часть следующего слайда. Однако при прокрутке слайдов он не привязывается к началу контейнера, в результате чего части слайдов не попадают в область просмотра при прокрутке свайпером.

Я пробовал установить высоту слайда на 70%, но это вызывает ту же проблему. Я также возился с параметром slidesOffsetAfter, но безуспешно.

Привязка слайд-шоу к началу контейнера, показывающая все изображение
Следующий слайд должен быть частично виден

Чтобы увидеть текущее состояние проекта: live dev environment

Вы можете увидеть проблему на рабочем столе с помощью горизонтального смахивания и на планшете с помощью вертикального свайпера.

CSS

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

<style>
@media screen and (max-width: 1079px){
.swiper-section {
    justify-content: flex-start;
    margin-top: 194px;
}
}

@media screen and (max-width: 1079px){
.main-navigation {
  left: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.sub-navigation {
  right: 45px;
  top: 45px;
}
}

@media screen and (max-width: 1079px){
.swiper-container {
    height: 965px;
}
}

.swiper-slide {
padding-bottom: 45px;
}

@media screen and (max-width: 1079px) {
.swiper-slide {
padding-bottom: 0px;
}
}

.swiper-slide:nth-child(even) {
 height: 75%;
 width: 45vw !important;
}

.swiper-slide:nth-child(odd) {
 height: 100%;
  width: 55vw !important;
}

@media screen and (max-width: 1079px) {
.swiper-div {
margin: 0px 45px 0px 45px;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(even) {
     height: 100%!important;
     width: 100% !important;
}
}

@media screen and (max-width: 1079px) {
.swiper-slide:nth-child(odd) {
 height: 100%!important;
 width: 100% !important;
}
}


.swiper-slide>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
  width: 175px;
  margin-left: 65px;
  border-radius: 50px;
  }

.swiper-pagination-progressbar {
  margin-top: 733px;
  background: #bababa;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #888888;
}

.swiper-container-horizontal>.swiper-pagination-progressbar {
height: 12px;
}

.swiper-container-vertical>.swiper-pagination-progressbar {
display: none;
}

</style>

JS

<!-- swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
  var swiperNodes = "";
  var pagination = '<div class=swiper-pagination></div>';
  var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
  var scrollbar = '<div class="swiper-scrollbar"></div>';
  var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
  /* loop throw all swipers on the page */
  $('.swiper-container').each(function( index ) {
    $( this ).append(swiperNodes);
  });
</script>
<!-- swiper JS Initialize -->
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: false,
    loop: true,
    centeredSlides: false,
    // Enable lazy loading
    lazy: true,
     mousewheel: {
    invert: true,
    },
    keyboard: {
    enabled: true,
    onlyInViewport: false,
    },
    scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    },
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      0: { /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2.1,
        spaceBetween: 30,
        slidesOffsetBefore: 0,
        direction: 'vertical',
      },
      1279: { /* when window >= 988px - webflow desktop */
        slidesPerView: 2,
        spaceBetween: 20,
        slidesOffsetBefore: 0,
      }
    },
    /* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,
    },
    */
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
    */
  })
</script>

7

javascript swiper.js swiper

Источник

user9630360 19 авг '20 в 14:21

5 ответов

Другие вопросы по тегам javascript swiper.js swiper

28 июл '21 в 18:49 2021-07-28 18:49 · Answer 1 · 2021-07-28 18:49

ты можешь измениться slidesPerView для числа с плавающей запятой, например 1.5, и если вы установите необязательный параметр на centeredSlides: true,loop: trueвы мало видите как предыдущий, так и следующий слайдер

15

Источник

28 июл '21 в 18:49

user1940238 27 сен '20 в 19:34 2020-09-27 19:34 · Answer 2 · 2020-09-27 19:34

На этом будет частичный вид следующего и предыдущего слайда. В моем случае это карусель во всю ширину, поэтому я использую vw в CSS, но вы можете использовать пиксели или%

const swiper = new Swiper( selector, {
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            slidesPerGroup: 1,
            paginationClickable: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        } );

И CSS:

.swiper-slide {
    width: 80vw;
  }

user11373617 22 июн '21 в 17:45 2021-06-22 17:45 · Answer 3 · 2021-06-22 17:45

Мне удалось показать только часть следующего слайда, и оба создают вне div.swiper-container и стилизовать внутреннюю div с участием padding, который может создать желаемый эффект.

Если вы хотите показать только предварительный просмотр следующего, стилизуйте только padding-right или padding-left, и все будет в порядке.

Применяемое заполнение должно учитывать промежутки между контейнерами. В моем случае spaceBetween было 10, поэтому в качестве отступа я использовал 20 пикселей.

Вот какой-то псевдокод:

      <script>
const swiper = new Swiper( '.my-class', {
            slidesPerView: 2,
            spaceBetween: 10,
            slidesPerGroup: 2,
            centeredSlides: false,
            loop: true,
            paginationClickable: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        } );
</script>

<style>
.full-width {
    margin: 0 calc(-100vw / 2 + 100% / 2) !important;
    width: 100vw;
}

.my-class {
   padding: 20px;
}
</style>

<div class="full-width">
  <div class="swiper-container my-class">
    ...
  </div>
<div>

user11082411 17 ноя '22 в 05:52 2022-11-17 05:52 · Answer 4 · 2022-11-17 05:52

Если вы хотите показать 1 полный слайд и половину второго слайда, вы можете использовать конфигурацию, например

slidesPerView: 1.2, работает в swiper версии 8.3

2

Источник

user11082411 17 ноя '22 в 05:52

user15968559 21 июл '22 в 07:04 2022-07-21 07:04 · Answer 5 · 2022-07-21 07:04

вот мой опыт:
я хочу 5 элементов слайда,
начальный и конечный элементы показывают идеальный половинный размер.

$_offset_x: половинный размер каждого элемента, я использую проценты в соответствии с дизайном.

      .swiper-wrapper {
    // left: $_offset_x!important;
    left: 9.63%!important;
}

используйте медиа-запрос, если у вас есть дополнительная потребность в мобильном телефоне.