swiper设置不需要无缝滚动_关于一次swiper无限滚动的开发笔记

项目需求很简单，某个类目，横向排布。超出自动横向无缝滚动。自然而然想到直接使用swiper。

第一步，安装swiper

npm install vue-awesome-swiper --save

第二步项目中引入

import Swiper from "swiper";

import "swiper/dist/css/swiper.min.css";

第三步在需要使用的组件中使用

html：

{{item.categoryName}}

{{item.unitPrice}}元/每斤

js：

var mySwiper1 = new Swiper(".swiper-container1", {

loop: true,

speed: 4000, //匀速时间

slidesPerView: 4,

spaceBetween: 30,

autoplay: {

delay: 0,

stopOnLastSlide: false,

disableOnInteraction: false

}

});

第四步：需要对swiper本身的css样式进行修改。

/**swiper轮播组件改成无限滚动的样式调整(必须) */

.swiper-container1 {

.swiper-wrapper {

transition-timing-function: linear !important;

}

}