2021-03-11：swiper 中实现每页显示多条遇到的问题总结

最新推荐文章于 2024-04-20 02:50:54 发布

AspNetSunny

最新推荐文章于 2024-04-20 02:50:54 发布

阅读量712

点赞数

分类专栏： vue 文章标签： swiper

本文链接：https://blog.csdn.net/sunnywuxian/article/details/114675913

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

想要实现这种左右留一点的效果：

主要样式：

/* swiper的宽高设置为内容区域的宽高  */
.swiper-slide {
      width: 660px !important; 
      height: 508px !important;
    }

/*内容区域宽高一定要设置为100% ,否则的话就不能实现这种显示效果了  样式之前设置成px的时候 然后一直就只能显示一个 愁死我了 */
 .swiper_item {
      width: 100%;
      height: 100%;
}

swiper的参数设置：

this.swiper = new Swiper(".swiperCenter", {
          slidesPerView: "auto",
          centeredSlides: true,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".imgNext",
            prevEl: ".imgPrev",
          },
        });