swiper网站基本使用

Swiper基本用法

HTML部分

             <div class="swiper-container">    
               <div class="swiper-wrapper">        
                 <div class="swiper-slide">   
                     <img src=""/>        
                 </div>
                 <div class="swiper-slide">   
                     <img src=""/>        
                 </div>          
                 <div class="swiper-slide">   
                     <img src=""/>        
                 </div>  
                 </div>        
                <!-- 如果需要分页器 -->        
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->        
                <div class="swiper-button-prev"></div>       
                <div class="swiper-button-next"></div>      
            </div>

JS部分

 <script>     
 var mySwiper = new Swiper("#main-banner", {        direction: "horizontal", // 垂直切换选项        
 loop: true, // 循环模式选项
        // 如果需要分页器       
         pagination: {         
          el: ".swiper-pagination",          
          clickable: "true",        
          },
        // 如果需要前进后退按钮        
        navigation: {          
        nextEl: ".swiper-button-next",          
        prevEl: ".swiper-button-prev",        
        },        
        autoplay: {
                  delay: 3000,          
                  disableOnInteraction: false,        
                  },      
                  });    
 </script>

css部分

//开以通过以下来进行active状态分页器的修改
.swiper-pagination-bullet-active {        
background-color: #fff;       
 width: 25px;        
 height: 5px;        
 border-radius: 2%;       
  opacity: 0.6;     
   }     
    .swiper-pagination-bullet {       
     width: 25px;        
     height: 5px;        
     border-radius: 2%;      
     }      
     .swiper-button-prev,      
     .swiper-button-next {       
      color: #fff;       
       opacity: 0.6;      }