轮播图

   写轮播图的方法有很多,这里我们用swiper插件来写

引入插件

<script src="../lib/swiper/js/swiper.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<!-- 轮播图 -->
<div class="banner container content">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg" alt="">
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 导航按钮 -->
      <div class="swiper-button-prev prev"></div>
      <div class="swiper-button-next"></div>
    </div>
<script>
 //轮播图
  var mySwiper = new Swiper ('.swiper-container', {
        loop: true, 
        autoplay: {
          delay: 1000
        },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
       // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
      </script>