美文网首页
swiper自动无限滚动轮播制作

swiper自动无限滚动轮播制作

作者: 心存美好 | 来源:发表于2022-03-24 10:23 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"> 

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }


    .swiper {
      width: 1100px;
        height:285px;
      margin:100px auto;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
    }
  </style>
</head>
<body>
    <!-- Swiper -->

    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <img src="http://www.hshkyl.com/uploads/allimg/20/1-200F41951520-L.jpg" alt="">
          </div>
          <div class="swiper-slide">
              <img src="http://www.hshkyl.com/uploads/20/1-2004050G233N9.jpg" alt="">
          </div>
          <div class="swiper-slide">
              <img src="http://www.hshkyl.com/uploads/20/1-200405064JM54.jpg" alt="">
          </div>
          <div class="swiper-slide">
              <img src="http://www.hshkyl.com/uploads/20/1-2004050G233N9.jpg" alt="">
          </div>
        
  
  
     
        </div>
        <div class="swiper-scrollbar"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>


    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

    <!-- Initialize Swiper -->
    <script>
    //   var swiper = new Swiper(".mySwiper", {
    //     autoplay:true,
    //     initialSlide :2,
    //     spaceBetween: 30,
    //     effect: "fade",
    //     navigation: {
    //       nextEl: ".swiper-button-next",
    //       prevEl: ".swiper-button-prev",
    //     },
    //     pagination: {
    //       el: ".swiper-pagination",
    //       clickable: true,
    //     },
    //   });
    var mySwiper = new Swiper('.swiper', {
    autoplay: true,//可选选项，自动滑动
    loop : true,
 
    scrollbar: {
    el: '.swiper-scrollbar',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
})
mySwiper.scrollbar.$dragEl.css('background','#ff6600');
//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper')
var mySwiper = document.querySelector('.swiper').swiper
mySwiper.slideNext();
    </script>
  </body>
</html>

轮播相关

轮播插件Swiper的使用 https://www.swiper.com.cn/
轮播插件的使用

菜单中“在线演示”----（选好轮播）----在新窗口打开----查看源码---复制结构，js，样式。

css样式方法一：链接网上的css文件，要改变地址【 网站导航中“获取Swiper---Swiper CDN地址--- 找到相应的文件 <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"> 】。

css样式方法二：也可下载【网站导航中“获取Swiper---下载Swiper 】，使用相对路径。

js文件也要引入（与引入css相同）

也可根据需要添加更多功能：菜单“API文档”中查看：自动切换Autoplay

相关文章