Swiper 移动端tab切换+滑动自适应

时间:2021-06-19 03:48:12
【文件属性】:

文件名称:Swiper 移动端tab切换+滑动自适应

文件大小:165KB

文件格式:RAR

更新时间:2021-06-19 03:48:12

swiper jquery

这个是基于Swiper库做的 内容我给了一个高度,方便查看效果, 应用到实际项目中不用设置高度 内容自动撑开 // 进去页面就判断第一个页面内容的高度 添加给swiper-container var divHgight=$(".divHgight").eq(0).height(); $(".swiper-container").height(divHgight); var mySwiper = new Swiper('.swiper-container', { autoHeight: true, onSlideChangeStart: function () { // 获取进去那个页面 删除和添加样式 $(".tabs .default").removeClass('default'); $(".tabs li").eq(mySwiper.activeIndex).addClass('default'); console.log('第' + ((mySwiper.activeIndex) + 1) + '页'); // 对应页面高度自适应 var activeHight = $(".divHgight").eq(mySwiper.activeIndex).height(); $(".swiper-slide").eq(mySwiper.activeIndex).height(activeHight); console.log(activeHight); $(".swiper-container").height(activeHight); } });


【文件预览】:
swiper
----images()
--------panda.png(36KB)
--------pic3-favor.png(36KB)
--------pic1-favor.png(26KB)
--------hot.png(2KB)
----js()
--------jquery.1.11.1.js(94KB)
--------idangerous.swiper.min.js(44KB)
--------swiper.min.js(76KB)
----css()
--------swiper.min.css(17KB)
--------style.css(3KB)
----index.html(3KB)

网友评论