jQuery全屏轮播图插件Swiper

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

 67136  408  查看评论 (52)
分享到微信朋友圈
X
jQuery全屏轮播图插件Swiper ie兼容8

在index.js第六行最后可根据自己图片的大小调整高度,同时决定下面选项点的位置,

2018-6-20增加使用方法

滑动后停止轮播问题

var mySwiper = new Swiper('.swiper-container', {
    pagination: '.pagination',
    loop: false,
    autoplay: 3000,
    paginationClickable: false,
    onSlideChangeStart: function() {
        //回调函数
        mySwiper.startAutoplay(); //让滑动后继续自动轮播
    }
});

如果您还要高度自适应,index.js中注释掉以下两句

 var newSlideSize = function slideSize(){
     //var w = Math.ceil($(".swiper-container").width()/3/*--调整高度---*/);
     //$(".swiper-container,.swiper-wrapper,.swiper-slide").height(w);
};

Css样式修改

/*---- banner ---*/
.swiper-container {
    height:100%;
    width:100%;//高度设置100%
    text-align:center;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    z-index:5;
    background:#F8F8F8;
}
.swiper-slide img{
    width:100%;
    height:100%;//高度设置100%
    vertical-align:middle;
    position:relative;
}
相关插件-幻灯片和轮播图,滑块和旋转

图片点击查看更多图片

仿京东,天猫商品详情 图片点击查看更多图片
  幻灯片和轮播图
 69919  313
  幻灯片和轮播图
 54740  450

购物网站特色栏目jquery插件

可以随意设置栏目信息,顶端可以使用四格或者更多图片来滑动显示,美观大方。
  幻灯片和轮播图
 30344  379

jQuery仿唯品会首页轮播图

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

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

    真皱 0
    2020/11/20 10:52:27
    为什么下载都用不了 回复
    水滴丶 0
    2018/12/24 15:55:35
    大神,这个一个页面放两个轮播怎么会出现只能实现一个有效,怎么解决呢?在线求解,谢谢!
        执念0
        2019/3/15 13:53:35
        设置不同的容器
    回复
    ?徐 0
    2018/11/1 14:46:41
    jq币怎么获得
        动于情0
        2019/10/10 16:35:42
        签到 或者回答别人提出的问题
    回复
    图破 0
    2018/7/31 14:56:01
    That's great and simple 回复
    水滴丶 0
    2018/7/16 9:25:11
    大佬,好厉害,下载下来发现问题能够及时解决,赞一个!
    回复
    づ 青青子吟 0
    2018/6/20 13:04:45
    人,在路上... ? 0
    2018/3/13 20:47:50
    非常实用的插件,简单实用 回复
    努力努力再努力 ting 0
    2017/11/23 22:17:00
    番茄你个偷马桶i 0
    2017/10/12 14:10:43
    美星 0
    2017/9/25 15:59:21
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复