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

ProgramBox

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

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#javascript #swiper #swiper.js

#javascript #swiper.js

Вопрос:

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

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

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

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

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

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>

 <!-- 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>

Ответ №1:

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

Ответ №2:

На этом слайде будет показан частичный вид следующего и предыдущего слайдов. В моем случае это карусель во всю ширину, поэтому я использую 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;
  }

Ответ №3:

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

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

Применяемое заполнение должно учитывать пробелы между контейнерами. В моем случае 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>

Ответ №4:

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

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

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

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

Ответ №5:

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

Просмотр слайдов: 1.2, работает в swiper версии 8.3