Swiper JS - 显示下一张幻灯片的一部分

Question

我想在视图中显示第二张幻灯片的一部分。大约 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>

Answer 1

这将显示下一张和上一张幻灯片的部分视图。在我的情况下，它是一个全宽轮播，所以我在 CSS 中使用 vw，但您可以使用像素或 %

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;
  }

Answer 2

您可以将 slidesPerView 更改为浮点数，例如 1.5，如果您将可选参数设置为 centeredSlides: true,loop: true，您几乎看不到上一个和下一个滑块

Answer 3

我设法只展示了下一张幻灯片的一部分，并且在div.swiper-container 之外创建了div 并使用padding 设置内部div 的样式，这可以创建想要的效果。

如果您只想显示下一个的预览，则只需设置 padding-right 或 padding-left 的样式就可以了。

应用的填充应考虑容器之间的空间。在我的例子中，spaceBetween 是 10，所以我使用 20px 作为填充。

这是一些伪代码：

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