常用的swiper

本文详细介绍了Swiper轮播图组件的使用方法,包括基本配置、实例化方法、常用属性如initialSlide、direction及speed等,还介绍了如何通过init属性控制初始化行为,以及loop属性实现无缝轮播。此外,还提供了分页器、导航按钮和滚动条的配置示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、先引入swiper.min.css和swiper.min.js
2、结构样式
swiper-container,swiper-wrapper,swiper-slide
3/实例化
var myswiper=newswiper('.swiper-container');
4、如果一个页面有多个swiper,最好给每一个swiper单独写一个类名
5、属性
initialSlide参数 //设定初始化时slide的索引,也就是页面一进来的时候显示的第几个slide,默认0
direction 设置当前slide的滑动方向 默认是水平的 垂直是vertical
speed 设置切换速度,默认是300ms
on 注册事件 on:{
事件名称:function(){}
}
init属性 是否立即初始化,默认是true 布尔值
loop 无缝轮播 布尔值 默认是false
activeIndex 返回当前活动块的索引
realIndex loop模式下的当前活动块的索引
设置autoplay:true等同于
autoplay:{
delay:3000,
stopOnLastSlide:false,
disableOninteraction:true
}


6、方法
init() 来初始化swiper实例
slideTo(index,speed,runcallbacks) 必选index


7、回调函数
slideChangeTransitionStart
slideChangeTransitionEnd

8、分页器
跟wrapper同级
在配置项里添加
pagination:{
el:'分页器名',
clickable;true,//点击分页器的时候,实现切换
type:bullets(默认是原点)
//fraction 分式,progressbar进度条 custom自定义
renderBullet:function(){
return '<span class="'
}
}

9、前进后退
navigation 跟wrapper同级


配置项里面
nacigation:{
nextEl:‘右箭头’,
prevEl:‘左箭头’
}
10、滚动条
跟wrapper同级的

draggable:true 拖拽滚动条的时候允许拖动滚动条

转载于:https://www.cnblogs.com/mapsxy/p/9638006.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值