永发信息网

swiper怎么获取轮播图下标

答案:2  悬赏:80  手机版
解决时间 2021-01-10 03:24
swiper怎么获取轮播图下标
最佳答案
建议你可以用swiper里的回调函数onTouchEnd(swiper, event)试试
全部回答
--首先定义一个容器

--添加图片



--小圆点分页器
--上一页
--下一页

复制代码
如果想让它动起来,那就继续来写js吧
复制代码
var mySwiper = new Swiper(".swiper-container",{
autoplay:1000,--每秒中轮播一次
loop:true,--可以让图片循环轮播
autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
pagination:".swiper-pagination",--让小圆点显示
paginationClickable:true,--实现小圆点点击
prevButton:".swiper-button-prev",--实现上一页的点击
nextButton:".swiper-button-next",--实现下一页的点击
            effect:"flip"--可以实现3D效果的轮播
})
复制代码
Swiper轮播的也有它的好处:
    1.Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
    2.Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
    3.Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
同时也有不足之处:(使用Swiper轮播插件ajax请求加载图片时,无法滑动的问题)
因为banner图是动态创建的,在插件开始初始化时,文档流中没用图片,所以没有创建相应宽度,通过调整js加载顺序,问题还是没有解决。
最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的,添加observer:true后问题解决!

var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
})
Swiper拥有丰富的API接口。(不过关于中文文档不多,没找着。)能够让开发者生成个人独有的分页器(pagination),上下滑块的按钮
以及4个回调函数:1.onTouchStart
         2.onTouchMove
         3.onTouchEnd
         4.onSlideSwitch。
以上内容是我个人总结,希望对各位有所帮助!
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
驾驶教练为什么都那么凶
身高1.5米适合弄什么样的发型
你写给沉溺于网络李华的劝告英语作文80-100字
dnf无极好吗?
体育颂的颂是什么意思
斤组什么词?
对付楼上噪音最好好的方法
名典时尚旅馆地址有知道的么?有点事想过去!
二婚结婚登记需要什么证件
汽车中空大屏一直开着对汽车有影响吗
人民的名义 孙连城 心怀宇宙多少集
00 1 (900) 220-03是什么电话
五百元之内的海鸥手表推荐一下
机油5w40适合什么气温
君子兰有三片叶子的吗
推荐资讯
100的3%怎么算?
请问做水电工程一平米多少钱?
使用捷速PDF编辑器怎么修改文字内容.ppt
凌云打死人事情
在读研究生可以考公务员吗?
我玩地铁跑酷,想买道具(付款的那种),结果
有谁知道地理和人类的身高有关系吗?
招远招商银行在什么位置
eva里初号机是怎么吃了力天使的
单选题Dotakeiteasywhilelistened_______a
延吉生鱼片就是烧烤喝啤酒拿着吃的那种那里有
酷狗拼音输入法怎么下载?
正方形一边上任一点到这个正方形两条对角线的
阴历怎么看 ?