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>

<!-- 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,1279: { /* when window >= 988px - webflow desktop */
        slidesPerView: 2,spaceBetween: 20,}
    },/* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,*/
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',hide: true,*/
  })
</script>

解决方法

此幻灯片将显示下一张和上一张幻灯片的部分视图。就我而言，这是一个全宽度的轮播，所以我在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;
  }

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

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

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

这是一些伪代码：

<script>
const swiper = new Swiper( '.my-class',{
            slidesPerView: 2,spaceBetween: 10,slidesPerGroup: 2,centeredSlides: false,} );
</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>

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

javascript swiper swiper.js