Swiper：基础学习

图示

概念

1. Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
2. Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
3. Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

CDN

1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css
2. https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js

使用步骤

1. 引入CSS和js文件
2. 设置容器
3. 初始化swiper

   <div class="swiper-container">	最外层容器
       <div class="swiper-wrapper">
           <div class="swiper-slide">
               <img src="img/j1.jpg" alt="">
           </div>
           <div class="swiper-slide">
               <img src="img/j2.jpg" alt="">
           </div>
           <div class="swiper-slide">
               <img src="img/j3.jpg" alt="">
           </div>
           <div class="swiper-slide">
               <img src="img/j4.jpg" alt="">
           </div>
       </div>
   </div>
              

基本知识点

1. 自动播放

   autoplay:true, //等同于以下设置
   autoplay: {
       delay: 3000,
       stopOnLastSlide: false,
       disableOnInteraction: true
   }
              

2. 设置分页

   pagination: {
       el: '.swiper-pagination'
   },
              

3. 设置左右箭头

   navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev'
   },
              

4. 设置滚动条

   scrollbar: {
       el: '.swiper-scrollbar'
   }
              

进阶知识点

1. 修改箭头颜色

   <div class="swiper-button-prev swiper-button-black"></div> <!-- 白色 -->
   <div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->
              

2. 添加分页

   pagination: {
       el: '.swiper-pagination',
       type: 'bullets',
       // type: 'fraction',
       // type : 'progressbar',
       // type : 'custom',
   },
              

3. 切换效果

   // effect : 'fade',
   effect : 'cube',
   // effect : 'coverflow',
   // effect : 'flip',
              

4. loop : true,
              

5. speed: 2000,
              

6. direction: 'vertical'
              

案例

手机全屏：手机全屏

移动新闻： 新闻界面