swiper设置不需要无缝滚动_使用swiper插件在vue项目中完成无缝滚动以及轮播图
轮播图在一般项目中很常见，很多常用element-ui组件库中也有轮播图，可以不再单独使用swiper，但是当有的ui组件不能完成你的需求后，则可以使用swiper完成。
1，首先安装swiper
yarn add swiper
2，引入
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
3、代码块(布局代码块)
@click="$router.push({ path: `/business_detail/${item._id}` })"
:src="item.src"
alt
:οnerrοr="defaultImg"
/>
css-----------如果你可以保证轮播图尺寸一致的话，可以不用限制图片高度，反之，图片尺寸不同的话，你可以通过媒体查询为每个尺寸的轮播图定一下高度
.slide_item img {
width: 100%;
object-fit: cover;
}
媒体查询如下：可根据需要添加
@media (min-width: 400px) and (max-width: 768px) {
.slide_item {
img {
height: 200px;
}
}
}
4、数据获取以及轮播图渲染
businessList().then(res => {
if (res.code == 0) {
this.image=res.data--------------------绑定的轮播图数据
}
this.$nextTick(() => {
this.swiper();--------------此处为轮播初始化，我写成了一个方法
});
});
5、swiper初始化
swiper() {
var mySwiper = new Swiper(".swiper-container", {
autoplay: true,
autoplay: {
disableOnInteraction: false
},
speed: 800,
loop: true,
autoplayDisableOnInteraction: false,
observer: true,----------------当获取图片时，轮播图不会循环轮播，原因是初始化的时候，还没有数据，数据拿到了，又初始化过了，因此加上粉色的这两个对象可以解决这个问题。
observeParents: true,
paginationClickable: true
});
}
6、无缝滚动
swiper() {
var mySwiper = new Swiper(".swiper-container1", {
initialSlide: 0,
autoplay: true,
loop: true,
speed: 1000,
slidesPerView: 5,----------你想有几个图片同时展示在页面上就写几，每次平滑过渡一张图片
spaceBetween: 0,
observer: true,----------原因同上
observeParents: true,
paginationClickable: true,
autoplay: {
disableOnInteraction: false
}
});
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！