swiper---点击按钮切换或联动切换
在做前端页面的时候,经常会遇到需要通过一些按钮来切换swiper的情况,或者是两个swiper进行联动切换:
第一种:点击按钮切换swiper以及滑动swiper切换按钮
var swiper = new Swiper('.swiper',{ loop: false, on:{ transitionEnd: function(swiper){ $(".swiper-tab .tab-item").eq(swiper.activeIndex).addClass('active').siblings('.tab-item').removeClass('active'); } } }); $(".swiper-tab .tab-item").click(function(){ $(this).addClass('active').siblings('.tab-item').removeClass('active'); development.slideTo($(this).index(), 1000, false); });
第二种:两个swiper联动切换
var sceneCateSwiper = new Swiper(".main-scene-cate-swiper", { slidesPerView: 'auto', on: { click: function(swiper){ sceneSwiper.slideTo(swiper.clickedIndex,1000,false); } } }); var sceneSwiper = new Swiper(".main-scene-swiper", { on: { transitionEnd: function(swiper){ $(".main-scene-cate-swiper .swiper-wrapper .swiper-slide").eq(swiper.activeIndex).addClass('active').siblings('.swiper-slide').removeClass('active'); } } });
打完收工!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
2021-01-04 Thinkphp---模型关联查询
2021-01-04 thinkphp---封装服务层