有关使用swiper插件的总结

swiper演示

1、将swiper箭头放在图片外部写法：

（左右箭头不受文档结构的影响）见官网 demo

html部分

<div class="div-center" style="position:relative;width:59%;margin-top:3.5vw;">

   <!—swiper content-->

   <div id="diy_ugg_2" class="carousel" style="margin-bottom:4px;overflow:hidden;">

        <div class="swiper-wrapper">

           <div class="swiper-slide">

                 <img src="../themes/redesign/images/282/sub/DIY-PROGRAM-bom-1.jpg" alt="UGG FUN肆造" style="width:100%;">

            </div>

           <div class="swiper-slide">

                 <img src="../themes/redesign/images/282/sub/DIY-PROGRAM-bom-1.jpg" alt="UGG FUN肆造" style="width:100%;">

            </div>

          </div>

    </div>

     <!-- Add Pagination -->

     <!-- <div class="swiper-pagination swiperpc-pagination row" style="width:100%;bottom:-20px;"></div> -->

      <!-- Add Arrows -->

       <div class="swiper-button-next mobile-hide shihua-right"></div>

        <div class="swiper-button-prev mobile-hide shihua-left"></div>

 </div>

js部分

var diy_ugg_2 = new Swiper('#diy_ugg_2',{

           pagination: '.swiperpc-pagination',

           nextButton: '.shihua-right',

           prevButton: '.shihua-left',

           slidesPerView: 1,

           slidesPerGroup : 1,

           paginationClickable: true,

           spaceBetween: 25,

           loop: true,

           speed:1000,

    });