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';
  }
    },
  }
  })