【轮播图】 一个插件就搞定

 工作用到轮播图，手写还是比较费时费力的。

不妨来个swiper插件，附送网址https://www.swiper.com.cn/

里面有swiper5的用法写的很详尽

引入文件可以选择下载或用CDN

我用的CDN

1. head里面写<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">  

2. body里面写<script src="https://unpkg.com/swiper/js/swiper.js"> </script>

3. html写

    <div class="swiper-content">
       <div class="swiper-slide">
           <a href="#">
               <img src="img/swiper1.png ">
           </a>
           <a href="#">
               <img src="img/swiper2.png ">
            </a>
            <a href="#">
               <img src="img/swiper3.png ">
            </a>
       </div>
    </div>

4. css自己写叭

5. html所有的结构写完了 初始化轮播图

    <script src="https://unpkg.com/swiper/js/swiper.js"></script>
   
    <script>
   
           // 初始化swiper
   
           var mySwiper = new Swiper('.swiper-container', {
   
               direction: 'horizontal', // 水平切换选项
   
               loop: true, // 循环模式选项
   
           })
   
      </script>

   6. 已经可以用了 至于加一些花里胡哨的东西  指路官网啦https://www.swiper.com.cn/