swiper.js设置默认index
时间: 2024-10-23 10:21:10 浏览: 17
swiper.js手机触屏滑动全屏幻灯片左右切换代码.zip
Swiper.js 是一个流行的轮播插件,用于创建响应式的触摸滑动幻灯片。如果你想设置默认显示的幻灯片索引,可以这样做:
1. 首先,在初始化 Swiper 实例时,传递一个 `initialSlide` 或 `slidesToScroll` 参数。`initialSlide` 设置单个幻灯片的索引,而 `slidesToScroll` 则控制一次滚动几项。
```javascript
var mySwiper = new Swiper('.swiper-container', {
initialSlide: 1, // 显示第二张幻灯片,默认从0开始计数
slidesPerView: 3, // 可选,每屏显示的幻灯片数
});
```
2. 如果你有动态内容需要加载并设置默认索引,可以在数据加载完成后更新 Swiper 的当前索引。
```javascript
function loadContent(index) {
// 加载内容...
mySwiper.slideTo(index); // 更新为指定索引
}
loadContent(5); // 初始化时显示第五张幻灯片
```
阅读全文