swiper实现移动横向滚动,并点击定位
首页引入swiper实现横向滚动,再自己计算滚动定位,贴代码
HTML:
<div class="swiper">
<div class="fui-tab fui-tab-success swiper-container swiper-container-horizontal swiper-container-autoheight">
<div class="swiper-wrapper">
<a class="swiper-slide">厨具1</a>
<a class="swiper-slide">清洁用品2</a>
<a class="swiper-slide">速食营养3</a>
<a class="swiper-slide">厨具4</a>
<a class="swiper-slide">清洁用品5</a>
<a class="swiper-slide">厨具6</a>
<a class="swiper-slide">清洁用品7</a>
<a class="swiper-slide">厨具8</a>
<a class="swiper-slide">清洁用品9</a>
<a class="swiper-slide">清洁用品10</a>
<a class="swiper-slide">清洁用品11</a>
<a class="swiper-slide">清洁用品12</a>
<a class="swiper-slide">厨具13</a>
</div>
</div>
</div>
JS:
var swiper1= new Swiper('.swiper-container',{
slidesPerView: 'auto',
freeMode : true
});
//始终让页面中只有4个标签页面
var wwidth = $(".swiper").width();
$(".swiper-wrapper a").css("width",wwidth/4)
var len = $(".swiper-wrapper a").size();
$(".swiper-wrapper a").on("click",function(){
var width = $(this).width(),
index = $(this).index()+1;
if(index >3 && index!=len){
width = (index -3)*width;
$(".swiper-wrapper").css({
"transform": "translate3d("+-width+"px, 0px, 0px)"
})
}else if(index==len){
width = (len -4)*width;
$(".swiper-wrapper").css({
"transform": "translate3d("+-width+"px, 0px, 0px)"
})
}else if(index==1||index==2||index==3){
$(".swiper-wrapper").css({
"transform": "translate3d(0px, 0px, 0px)"
})
}
$(this).addClass("active").siblings().removeClass("active");
})
自己动手试一试吧