swiper插件的使用

1、引入JS源文件并配置翻页

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper.min.js"></script>
  <script>
      var swiper1 = new Swiper('.swiper-container-1', {
          loop: true,
          autoplay: 5000,
          pagination: '.swiper-pagination',
          paginationClickable :true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
      });
 
      var swiper2 = new Swiper('.swiper-container-2', {
          loop: true,
          autoplay: 5000,
          paginationClickable :true,
          pagination: '.swiper-pagination',
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
      });
  
      var swiper3 = new Swiper('.swiper-container-3', {
          loop: true,
          autoplay: 5000,
          paginationClickable :true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
      });
      
      var swiper4 = new Swiper('.swiper-container-unite', {
          loop: true,
          autoplay: 5000,
          paginationClickable :true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
      });
  
  </script>

2、添加html代码

 <div class="swiper">
        <div class="swiper-container swiper-container-1">
            <div class="swiper-wrapper" style="text-align: center;">
              <div class="swiper-slide">
                  <img src="images/banner1.jpg" alt="banner">
                
              </div>
              <div class="swiper-slide">
                <img src="images/banner2.jpg" alt="banner">
            </div>
            <div class="swiper-slide">
                <img src="images/banner3.jpg" alt="banner">
            </div>
            <div class="swiper-slide">
                <img src="images/banner4.jpg" alt="banner">
            </div>
            <div class="swiper-slide">
                <img src="images/banner5.jpg" alt="banner">
            </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev swiper-btn-prev"></div>
            <div class="swiper-button-next swiper-btn-next"></div>
        </div>
    </div>