swiper 实现移动端两侧露一半轮播图

CSS 控制 swiper-slide 样式-滑动子元素样式,设置宽度和间隔(通过spaceBetween: 50,属性设置的是通过margin-righ实现的,效果非常之low)


    .swiper-slide {
        width: 60%;
        padding:0 2rem!important;
    }

HTML是标准结构,可以在swiper官网找到

js代码

var mySwiper2 = new Swiper ('.swiper2', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
       //以上两个属性没有关系
        slidesPerView: 'auto',//默认一个屏幕显示几张图,必须auto!
        centeredSlides: true,//每屏,居中显示
       
     
      

    });

 

 

你可能感兴趣的:(前端,swiper,轮播图)