swiper轮播-可支持触摸滑动(整理)

简介: swiper轮播-可支持触摸滑动(整理)
<!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
0
12
分享
相关文章
css样式实现一个滑动按钮
css样式实现一个滑动按钮
71 0
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
ue仿携程轮播图效果(滑动轮播,下方高度自适应)
这篇文章主要介绍了vue仿携程轮播图效果(滑动轮播,下方高度自适应),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
399 0
讲述小程序之组件picker(从底部弹起的滚动选择器)
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
614 0
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
一篇文章帮助你理解跑马灯的滚动原理
一篇文章帮助你理解跑马灯的滚动原理
184 0
一篇文章帮助你理解跑马灯的滚动原理
不滚动时隐藏自定义滚动条
现在部分浏览器已支持自定义滚动条,成了设计师和完美主义者的救星。 新版上线后,设计师又提了个新需求:把导航栏右侧的滚动条,在不滚动时隐藏掉(同时还发了个小视频表示效果)。就是下图中右侧的粗线:   在mac系统下测试了Chrome/Safari/Firefox浏览器,发现这些系统在默认情况下,不滚动时滚动条是隐藏的。
4150 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等