可以根据https://www.swiper.com.cn中的中文教材/swiper4.x使用方法课件做
先导入两个链接

  1. <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
  2. <script src="https://cdn.bootcss.com/Swiper/4.4.6/js/swiper.js"></script>

实现轮播

  1.  <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
  2.     <style>
  3.         .swiper-container {
  4.               width: 600px;
  5.               height: 300px;
  6.         }  
  7.     </style>
  8. </head>
  9. <body>
  10.     <div class="swiper-container">
  11.         <div class="swiper-wrapper">
  12.             <div class="swiper-slide">Slide 1</div>
  13.             <div class="swiper-slide">Slide 2</div>
  14.             <div class="swiper-slide">Slide 3</div>
  15.         </div>
  16.         <!-- 如果需要分页器 -->
  17.         <div class="swiper-pagination"></div>
  19.         <!-- 如果需要导航按钮 -->
  20.         <div class="swiper-button-prev"></div>
  21.         <div class="swiper-button-next"></div>
  23.         <!-- 如果需要滚动条 -->
  24.         <div class="swiper-scrollbar"></div>
  25.     </div>
  26.     <script src="https://cdn.bootcss.com/Swiper/4.4.6/js/swiper.js"></script>
  27.     <script>        
  28.         var mySwiper = new Swiper ('.swiper-container', {
  29.           direction: 'horizontal', // 垂直切换选项
  30.           loop: true, // 循环模式选项
  32.           // 如果需要分页器
  33.           pagination: {
  34.             el: '.swiper-pagination',
  35.             clickable:true
  36.           },
  38.           // 如果需要前进后退按钮
  39.           navigation: {
  40.             nextEl: '.swiper-button-next',
  41.             prevEl: '.swiper-button-prev',
  42.           },
  43.           //自动播放
  44.           autoplay: {
  45.             delay: 2000,
  46.             stopOnLastSlide: false,
  47.             disableOnInteraction: false,
  48.         }
  49.         })        
  50.         </script>