Swiper_idangerous.swiper nextbutton-CSDN博客

本文链接：https://blog.csdn.net/dunegao/article/details/73744465

Swiper学习总结：
swiper是用来实现图文滚动插件
一、支持移动端swiper3
   1、引用插件
       <link rel="stylesheet" href="path/to/swiper.min.css">
       <script src="path/to/swiper.min.js"></script>
   2、HTML内容
       <div class="swiper-container">
           <div class="swiper-wrapper">
               <div class="swiper-slide">Slide 1</div>
               <div class="swiper-slide">Slide 2</div>
               <div class="swiper-slide">Slide 3</div>
           </div>
           
           <div class="swiper-pagination"></div>

           
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>

           
           <div class="swiper-scrollbar"></div>
       </div>
   3、初始化js
       <script>
           var mySwiper = new Swiper ('.swiper-container', {
               direction: 'vertical', // 滚动方向，默认为horizontal
               loop: true, //滚动状态
               autoplay : 5000, //自动切换,单位ms

               // 如果需要分页器
               pagination: '.swiper-pagination',

               // 如果需要前进后退按钮
               nextButton: '.swiper-button-next',
               prevButton: '.swiper-button-prev',

               // 如果需要滚动条
               scrollbar: '.swiper-scrollbar',
          })
       </script>
   4、如果需要前进后退按钮放在外面，直接放在swiper-container外面即可
二、支持IE8等swiper2用法
   （1）原点模式
       1、引用swiper2插件
           <link rel="stylesheet" href="../css/idangerous.swiper.css" />
           <script type="text/javascript" src="../js/idangerous.swiper.min.js"></script>
       2、HTML内容
           <div class="titlePic">
               <div class="swiper-container">
                   <div class="swiper-wrapper">
                       <div class="swiper-slide">
                           <img src="../img/hotel/hotel_banner.png" />
                       </div>
                       <div class="swiper-slide">
                           <img src="../img/hotel/hotel_banner.png" />
                       </div>
                       <div class="swiper-slide">
                           <img src="../img/hotel/hotel_banner.png" />
                       </div>
                   </div>
                   
                   <div class="pagination"></div>
               </div>
           </div>
       3、初始化js
           var mySwiper = new Swiper('.titlePic .swiper-container', {
               loop: true,
               pagination: '.pagination',
           })
       4、自定义css样式
       .titlePic{
           margin: 0 auto;
           height: 418px;
           position: relative;
           width: 100%;
       }
       .titlePic .swiper-container{
           width: 100%;
           height: 418px;
       }
       .titlePic img{
           height: 418px;
           width: 100%;
       }
       .titlePic .swiper-container .pagination {
           margin-left: 0;
           position: absolute;
           top: 350px;
           left: 0;
           z-index: 20;
           bottom: 10px;
           width: 100%;
           text-align: center;
       }
       .titlePic .swiper-pagination-switch {
           display: inline-block;
           width: 11px;
           height: 11px;
           border-radius: 11px;
           background: #CCD7DD;
           margin: 0 5px;
           opacity: 0.8;
           border: 1px solid white;
           cursor: pointer;
       }
       .titlePic .swiper-active-switch {
           background: #FF7604;
       }

   （2）前进后退按钮模式
       1、引用swiper2插件
           <link rel="stylesheet" href="../css/idangerous.swiper.css" />
           <script type="text/javascript" src="../js/idangerous.swiper.min.js"></script>
       2、HTML内容
           <div class="container partner">
               <h3>合作品牌</h3>
               
               <div class="arrow-left">
                   <a href="javscript:;"><img src="../img/hotel/left.png"/></a>
               </div>
               <div class="arrow-right" >
                   <a href="javscript:;"><img src="../img/hotel/right.png"/></a>
               </div>
                   
                   <div class="swiper-container">
                       <div class="swiper-wrapper">
                           <div class="swiper-slide">
                               <img src="../img/hotel/board1.png" />
                           </div>
                           <div class="swiper-slide">
                               <img src="../img/hotel/board1.png" />
                           </div>
                           <div class="swiper-slide">
                               <img src="../img/hotel/board1.png" />
                           </div>
                           <div class="swiper-slide">
                               <img src="../img/hotel/board1.png" />
                           </div>
                       </div>
                   </div>
           </div>
       3、初始化js
           var mySwiper = new Swiper('.partner .swiper-container', {
               nextButton: '.swiper-button-next',
               prevButton: '.swiper-button-prev',
               parallax: true, //设置动画效果
               slidesPerView: 3,//设置显示图片个数
               spaceBetween: 16 //设置间隔
           })
           //设置前进后退按钮点击事件
           $('.arrow-left').on('click', function(e) {
               e.preventDefault()
               mySwiper.swipePrev()
           })
           $('.arrow-right').on('click', function(e) {
               e.preventDefault()
               mySwiper.swipeNext()
           })
       4、自定义css样式
           /*swiper容器设置*/
           .partner .swiper-container {
               margin-top: 50px;
               width: 93%;
           }
           /*前进后退按钮设置*/
           .partner .arrow-left {
               position: absolute;
               top: 50%;
               padding-left: 0;
               width: 2%;
               z-index: 99;

           }
           .arrow-left img{
               margin-left: 0;
               width: 100%;
               height: 30px;
           }
           .partner .arrow-right {
               position: absolute;
               padding-right: 0;
               top: 50%;
               left: 98%;
               width: 2%;
               float: right;
               z-index: 99;
           }
           .arrow-right img{
               width:100%;
               height: 30px;
           }
           /*内容图片设置*/
           .partner .swiper-slide img {
               width: 90%;
               padding: 15%;
               height: 123px;
               border: 1px solid #999999;
           }