# Swiper设置环路轮播到最后一个停止的问题
最近在使用Swiper做自动滚动的时候发生了问题，花了不少时间来解决，所以有必要记一下。
# 一、需求与问题
# 1.需求如下
实现一个列表的每一行每隔3s的自动向下滚动，滚动到最后一行后继续向下滚动，此时继续滚动的是第一行。
# 2.配置
引入插件后实例化Swiper，配置以下配置参数：👇
function InitSwiper() {
new Swiper('.swiper-container', {
direction: 'vertical',
mousewheel: true,
observer: true,
observeParents: true,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
slidesPerView: 2,
spaceBetween: 10
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 3.问题
一顿操作猛如虎，结果发现滚动到最后一行死活不往下滚了。。。🙄
# 二、解决问题
仔细研究Swiper的API文档，发现设置为loop模式时，Swiper会在slides前后各复制若干个swiper-slide用于滚动切换。
但是打开控制台就能发现我这里没有复制，一共3个swiper-slide，还是3个。
开始以为是配置的问题，但是多次尝试无果，最后只好祭出百度大法，发现是初始化方法写错地方了。应该在拿到数据之后初始化。。🤣
getSwiperInfo("../api/example").then(res => {
this.data = res;
new Swiper('.swiper-container', {
direction: 'vertical',
mousewheel: true,
observer: true,
observeParents: true,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
slidesPerView: 2,
spaceBetween: 10
});
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17