Swiper JS Slides不会一直向左滑动

Question

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

我尝试设置 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%;
                      }

我或多或少试图达到与此站点上的第一个 slider 相同的效果： https://iti.ca/en/

Slider 在开始 Position ：

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

谢谢！

Answer 1

如果要滑动多张幻灯片或一组幻灯片，则应使用slidesPerGroup: 3的 swiper js 选项，（要移动的幻灯片数）这里是swiperjs 页面上的演示。

所以现在，如果这次我得到了你，你可以设置 swiper slider slidesPerView: "auto"希望这会对你有所帮助。