swiper轮播图

最新推荐文章于 2023-12-14 15:33:54 发布

大可&不必

最新推荐文章于 2023-12-14 15:33:54 发布

阅读量230

点赞数

分类专栏：原生javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/style201904/article/details/106278646

版权

原生javascript 专栏收录该内容

37 篇文章

订阅专栏

 <!-- 轮播图 -->
  <div class="swiper-container swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./images/0.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/2.jpg" alt="">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>-->
  </div>

var mySwiper = new Swiper('.swiper1',{
  autoplay: 3000,
  pagination : '.swiper-pagination',    // 如果需要分页器
  paginationElement : 'li',   //分页器的元素
  paginationType : 'bullets', //分页器样式类型
  paginationClickable :true,  //设置为true时，点击分页器的指示点分页器会控制Swiper切换。
  loop : true, //无限轮播
  grabCursor : true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
  // virtualTranslate : true, //虚拟位移
});