Swiper-master滑动翻页

所属分类:媒体-幻灯片和轮播图,滑块和旋转

 73922  420  查看评论 (24)
分享到微信朋友圈
X
Swiper-master滑动翻页 ie兼容9

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。

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>

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

<script type="text/javascript">
    window.onload = function() {  ...}
</script>

或者这样(Jquery和Zepto)

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

5.完成。恭喜你,现在你的Swiper应该已经能正常切换了,如果没有,你可以参考下这个测试包。现在开始添加各种选项和参数丰富你的Swiper,开启华丽移动前端创作之旅。


相关插件-幻灯片和轮播图,滑块和旋转

5种方式轮播图

5种方式轮播图
  幻灯片和轮播图
 80126  401

jQuery仿唯品会首页轮播图

jQuery唯品会首页轮播图,渐隐切换,代码简单易懂
  幻灯片和轮播图
 23553  266

仿UC轮播插件imgSlider.js

js图片轮播幻灯片制作UC浏览器官网焦点图片切换,通过鼠标点击缩略图切换banner大图,带左右按钮控制缩略图片滚动切换,进行图片自动轮播
  幻灯片和轮播图
 24215  276

jquery适合风景展现的图片切换特效

图片切换,带有标题和缩略图,效果很好,修改非常简单,兼容各大浏览器
  幻灯片和轮播图
 24957  248

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

    dseven 0
    2019/11/28 17:06:48
    要是能移动端适配就好了 回复
    ?--牵你手? 0
    2019/11/21 10:08:55
    手机端怎么适配? 回复
    坑爹的社会我还能信谁 0
    2018/8/7 10:22:17
    我想知道这个如何 显示 显示的第几页和一共有几页 回复
    weirdooo 0
    2018/7/4 15:11:07
    怎么让第一个效果,一开始的时候第二个slide在居中状态呢
        被窝是青春的坟墓0
        2018/7/12 14:17:21
        initialSlide:1
    回复
    Ken ??? 0
    2018/2/1 9:29:52
    想要那个中间放大效果 回复
    SiX ? 0
    2017/12/18 16:12:27

    这怎么调单个的宽度

        昵称0
        2018/1/10 20:36:38

        可以选择浏览器里面微调自己找,这对自己是一种锻炼  

    回复
    。。 0
    2017/11/15 10:18:54

    我也想要这个我

    回复
    等待ンゝ 0
    2017/10/10 9:14:52
    大大大悟空。 0
    2017/9/8 10:50:15
    路痴 0
    2017/9/6 17:01:59
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复