Swiper JS Slides不会一直向左滑动

Question

我的 Swiper JS 滑块有点问题。我希望幻灯片从左侧开始，并在每次单击时一直向左滑动。现在最后一张幻灯片刚刚进入视图，但并未在容器的左侧结束。任何人都知道这是否可能以及我将使用哪些设置来实现这一目标？

我尝试设置 loop:true 但这会将我的第一张幻灯片居中并在左侧显示我一开始不想要的部分。

我的 JS：

const swiper = new Swiper('.swiper-container', {

  initialSlide: 0,
  slidesPerView: 1.8,
  centeredSlides: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

});

我的 CSS

 .swiper-container {
                        width: 100%;
                        height: 100%;
                        min-height: 500px;
                      }

                      .swiper-slide {
                        text-align: center;
                        font-size: 18px;

                        /* Center slide text vertically */
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                      }

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

                      .swiper-slide {
                        width: 40%;
                        flex-shrink: 0;
                        /*padding-right: 10%;*/
                      }

                      .swiper-slide article {
                        border: solid 1px red;
                        width: 100%;
                        height: 100%;
                        margin-right: 10%;
                      }

我或多或少试图达到与本站第一个滑块相同的效果：https://iti.ca/en/

滑块在起始位置：

点击导航箭头后的滑块。 （只有两张幻灯片，但幻灯片 2 没有移到最左边）

谢谢！

Answer 1

（如果我理解您的问题）如果您想滑动多张幻灯片或一组幻灯片，那么您应该使用 slidesPerGroup: 3 的 swiper js 选项，（您的幻灯片数量想搬家）这里是swiperjs page上的演示。

所以现在，如果这次我得到了你，你可以设置滑动滑块的选项 slidesPerView: "auto" 希望这会对你有所帮助。