请选择 进入手机版 | 继续访问电脑版

象涛徽软论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 829|回复: 1

Swiper使用方法

[复制链接]

46

主题

47

帖子

10090万

积分

超级版主

Rank: 8Rank: 8

积分
100904688
发表于 2016-9-27 15:43:40 | 显示全部楼层 |阅读模式
本帖最后由 HaimengLi 于 2016-9-28 14:52 编辑

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>标签
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,

    // 如果需要分页器
    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })      
  </script>
</body>

如果不能写在HTML内容的后面,则需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() {
  ...
}
</script>

或者这样(Jquery和Zepto)
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>

以下是几个效果图:





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

如果没有,你可以参考以下测试包☟☟☟☟☟☟☟☟☟

            测试包。


更多效果请见测试包☝☝☝☝☝☝☝☝☝(限时免积分下载哦,不容错过。登录后可见)。

现在开始添加各种选项和参数丰富你的Swiper,开启华丽移动前端创作之旅。




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

3

帖子

29

积分

禁止访问

积分
29
发表于 2017-2-20 13:14:31 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|XTHSOFT Inc. ( 浙ICP备14033542号-1

GMT+8, 2018-5-25 07:04 , Processed in 0.223523 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表