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

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

 54219  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
});
相关插件-图片展示,幻灯片和轮播图

在圆点上不断滑动鼠标看看效果

图片以圆点显示,随着鼠标的滑动,圆点的尺寸越来越小,图片越来越清晰
  图片展示
 31373  449

jQuery图片放大、缩小、旋转

jQuery图片旋转插件jQuery.artZoom修改版
  图片展示
 50838  308

jQuery图片放大镜

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

jQuery加vue 3D盒子旋转展示

3D旋转盒子,全景展示,可选择图片,设置宽高
  图片展示
 33612  364

讨论这个项目(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

        加一个时间参数

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复