swiper基础使用，内容居中与不居中（偏移），全屏显示与自定义宽度（一）

                                  

如图左右偏移量不一样，设置slidesOffsetBefore：number即可。

默认一个如果没有设置slidesPerView 一个slider的宽度为100%，可以自定义宽度在style设置，我自己设置8vw；

<script src="/dist/js/swiper.min.js"></script>

<div class="swiper-container-new">

        <div class="swiper-wrapper">

        <!-- 1 -->

        <div class="swiper-slide">内容1</div>

        <!-- 2 -->

        <div class="swiper-slide">内容2</div>

        <!-- 3 -->

        <div class="swiper-slide">内容3</div>

        <!-- 如果需要分页器 -->

       <div class="swiper-pagination2"></div> 

</div>

<script>

          //.swiper-container-new  我们轮播大容器的选择器

          var mySwiper2 = new Swiper('.swiper-container-new', {

          direction: 'horizontal',      // 水平切换选项    垂直vertical  默认是水平切换模式

          loop: true,                       // 循环模式选项

          autoplay: true,                //会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 
                                                   loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点

            speed:500,                     //速度，根据个人喜好

            pagination: {

                    el: '.swiper-pagination2',  //分页器 -

             },

            slidesPerView: 'auto',     //设置slider容器能够同时显示的slides数量

            noSwiping: false,           //设为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动，                                                       希望文字被选中时可以考虑使用。该类名可通过noSwipingClass修改

            watchSlidesProgress: true, //开启这个参数来计算每个slide的progress(进度、进程)

            paginationClickable: false,

            slidesPerView: 'auto',      //设置slider容器能够同时显示的slides数量

            spaceBetween: 15,          //在slide之间设置距离 默认单位px 也可以设置% vw vh ....

            centeredSlides:false,       //设定为true时，active slide会居中，而不是默认状态下的居左

            slidesOffsetBefore:30,     //设定slide与左边框的预设偏移量 还有slidesOffsetAfter 反之

            })

</script>