swiper 间距轮播图 滑块
引入 swiper文件
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js" charset="utf-8"></script>
jq不要忘记引入了
document.getElementsByClassName('make_detail')[1].className += ' this_mar';
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', //水平滑动
centeredSlides: true, //居中展示
spaceBetween:20, //间距20px
slidesPerView:'auto', //显示多少个
on: {
slideChangeTransitionEnd: function(){ //事件
console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide
var cla_leng=document.getElementsByClassName('make_detail');
var sss=cla_leng.length-1;
$('.make_detail').removeClass('this_mar')
if(this.activeIndex>0&&this.activeIndex<sss){
cla_leng[this.activeIndex-1].className += ' this_mar';
cla_leng[this.activeIndex+1].className += ' this_mar';
}else if(this.activeIndex==0){
cla_leng[this.activeIndex+1].className += ' this_mar';
}else{
cla_leng[this.activeIndex-1].className += ' this_mar';
}
},
}
})