插件_swiper

1 swiper

1 起步: 💦
--------------------------------------------------------------------------------
1 在线链接: CSS + JS
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>  

2 下载 swiper 压缩包: 
  package -> swiper-bundle.min.js + swiper-bundle.min.css
--------------------------------------------------------------------------------

3 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>
--------------------------------------------------------------------------------

4 CSS 样式: 💦
--------------------------------------------------------------------------------
  .swiper-container {  //轮播图的大小
      width: 600px;
      height: 300px;
  }  
--------------------------------------------------------------------------------

5 JS交互: 💦
--------------------------------------------------------------------------------
<script>        
  var mySwiper = new Swiper ('.swiper-container', {   //注意这个位置的， class名和 ID名， 是要对应以的 div 盒子的
    direction: 'vertical',   //垂直切换选项, 删除这个代码就是左右切换了
    loop: true,   //循环模式选项 true /false  （是否能从尾部再次滑到头部的效果）
    autoplay: {   //控制自动循环的一些参数
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
    
    // 如果需要分页器  +类名   //不需要直接删除
    pagination: {
      el: '.swiper-pagination',
      clickable :true,    //点击分页器控制图片切换
    },
    
    // 如果需要前进后退按钮   //不需要直接删除
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条   //不需要直接删除 
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>
--------------------------------------------------------------------------------