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");
})

自己动手试一试吧