swiper4移动端轮播实例

最新推荐文章于 2023-02-21 14:42:22 发布

雨化

最新推荐文章于 2023-02-21 14:42:22 发布

阅读量332

点赞数

分类专栏： swiper 文章标签： javascript

本文链接：https://blog.csdn.net/qing_x_c/article/details/105773235

版权

swiper 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <title>移动端轮播</title>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css" >
</head>

<body>
  <div style="height: 300px;" class="swiper-container">
    <div class="swiper-wrapper">
      <!-- 下面是4个不同颜色的轮播滑块 -->

      <div style="background-color: #00f;" class="swiper-slide"><a href="#">啊啊啊啊</a></div>
      <div style="background-color:#ff0;" class="swiper-slide"><a href="#">？？？？</a></div>
      <div style="background-color: #f00;" class="swiper-slide"><a href="#">咋咋咋</a></div>
      <div style="background-color: #00f;" class="swiper-slide"><a href="#">木事</a></div>
    </div>
    <div class="swiper-button-prev"></div><!--左箭头-->
    <div class="swiper-button-next"></div><!--右箭头-->
    <div class="swiper-pagination"></div>
    <!--分页器-->
  </div>
</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
<script>

  var mySwiper = new Swiper('.swiper-container', {//初始化Swiper
    autoplay: {//自动切换
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    navigation: {//前进后退
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {//分页器
      el: '.swiper-pagination',
      clickable: true,
    },
    loop: true,//循环
    autoplayDisableOnInteraction : false, //用户操作swiper之后，是否禁止autoplay，默认为true：停止。
  })
</script>

雨化

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swiper4移动端轮播实例

<!DOCTYPE html><html><head> <title>移动端轮播</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, ...
复制链接

扫一扫

专栏目录