【文件属性】:
文件名称: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)