UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

Swiper3用于移动端网站的内容触摸滑动

所属分类：媒体-图片展示,幻灯片和轮播图

 55299  513  查看评论 (59)
分享到微信朋友圈
X
Swiper3用于移动端网站的内容触摸滑动 ie兼容9
 查看演示  立即下载

Swiper使用方法

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="path/to/swiper.min.css">
    </head>
<body>
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

如果你的页面加载了 jQuery.js或者zepto.js，你可以选择使用更轻便的 swiper.jquery.min.js。

<!DOCTYPE html><html><head>
    ...    <link rel="stylesheet" href="path/to/swiper.min.css"></head><body>
    ...    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.min.js"></script></body></html>

2.HTML内容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
    width:600px;
    height:300px;
}

4.初始化Swiper：最好是挨着</body>标签     

var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
})

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

 window.onload = function() {  ...}

或者这样（Jquery和Zepto）

<script type="text/javascript">
    $(document).ready(function () { ...})
</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

很多网友提到的自动轮播问题

加autoplay:1500，为1.5秒自动轮播1次

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    autoplay: 1500
});

滑动后自动轮播停止了，不想让他停止怎么办？

加autoplayDisableOnInteraction : false,  

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    autoplay: 1500,
    autoplayDisableOnInteraction: false, //注意此参数，默认为true
});
相关插件-图片展示,幻灯片和轮播图
查看更多

原生js图片查看插件(原创)

 原生js实现点击图片放大预览
  图片展示
 33233  346

JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

 fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片，接下来我就为大家讲解以下相关的用法。
  图片展示
 45121  421

jQuery图片放大镜

 实现如京东等网站放大缩小效果
  图片展示
 27570  317

jQuery仿淘宝评论区

 jQuery仿淘宝评论区图片放大预览
  图片展示
 16183  219

讨论这个项目（59）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    庆余年? 0
    2019/8/24 16:45:32
    好东西呀，点赞
    回复
    龙波 0
    2018/10/17 20:15:40
    把握幸福 0
    2018/9/11 17:42:50
    挺不错的，就是不会下载 回复
    MoonMoon 0
    2018/8/17 13:05:15
    轮播怎么用
        MoonMoon0
        2018/8/17 13:06:08
        自动轮播里面没有说明文件，不知道怎么用
        西瓜1
        2018/8/17 13:22:10

        加autoplay:1500，为1.5秒自动轮播1次

        var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    autoplay: 1500
});
        MoonMoon0
        2018/8/17 14:11:16
        谢谢，好了
        MoonMoon0
        2018/8/17 14:17:40
        我也想问，滑动后自动轮播 停止了 不想让他停止怎么整
        西瓜1
        2018/8/17 14:46:46

        加autoplayDisableOnInteraction : false,  

        var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    autoplay: 1500,
    autoplayDisableOnInteraction: false, //注意此参数，默认为true
});
        MoonMoon0
        2018/8/17 15:14:53
        谢谢你，你真棒
    回复
    鹏而 0
    2018/4/26 11:34:49
    滑动后自动轮播 停止了 不想让他停止怎么整
        MoonMoon0
        2018/8/17 15:43:57
        var swiper = new Swiper('.swiper-container', {
   pagination: '.swiper-pagination',
   paginationClickable: true,
   autoplay: 1500,
   autoplayDisableOnInteraction: false, //注意此参数，默认为true
});
        075472621220
        2019/3/13 23:41:26
        楼上说的很对
    回复
    污力 0
    2018/4/11 16:02:34
    怎么去掉两个图片之间的间隔，在哪加代码 回复
    sunnyhuan 0
    2017/12/13 18:56:11

    感觉能用到很多地方，下载体验看看

    回复
    hoho 0
    2017/11/2 22:30:49

    为啥我不能滑动・・・・・求解决

    回复
    haru haru。 0
    2017/9/13 16:59:34

    我是从后台获取数据往里添加的，但是滑动会出现问题，滑不过去

    回复
    不明白 0
    2017/7/26 12:18:14

    会自动滚动吗？怎么是上下滑动

        雨天，屋檐下0
        2017/8/15 16:21:57

        autoplay&direction

        zealzhanghui0
        2017/9/28 14:57:53

        加一个时间参数

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复