jQuery支持移动端轮播图插件swipeslider.js

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

 107854  373  查看评论 (28)
分享到微信朋友圈
X
jQuery支持移动端轮播图插件swipeslider.js ie兼容10

使用方法

引用以下文件

<link rel="stylesheet" type="text/css" href="dist/swipeslider.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="dist/swipeslider.min.js"></script>

html

<figure id="full_feature" class="swipslider">
    <ul class="sw-slides">
        <li class="sw-slide">
            <img src="img/summer_beach.jpg" alt="Summer beach concept">
        </li>
        <li class="sw-slide">
            <img src="img/lang_yie_ar_kung_fu.jpg" alt="Lang from Yie Ar Kung Fu">
        </li>
        <li class="sw-slide">
            <img src="img/tiny_vacation.jpg" alt="Tiny Tina">
        </li>
        <li class="sw-slide">
            <img src="img/borderlands_tiny_tina.jpg" alt="Tiny Tina from Borderlands 2">
        </li>
        <li class="sw-slide">
            <img src="img/redhead.jpg" alt="Redhead girl">
        </li>
    </ul>
</figure>

js

<script type="text/javascript">
    $(window).load(function() {
         $('#full_feature').swipeslider();
    }
</script>
相关插件-幻灯片和轮播图
  幻灯片和轮播图
 29405  387

图片标题轮播

幻灯片插件,它非常小巧,压缩后仅 1.34KB,功能也不算丰富,圆点控制、自动播放。
  幻灯片和轮播图
 35114  421

jQuery轮播图带切换进度显示

基于jQuery SuperSlide 实现的轮播图带切换进度显示
  幻灯片和轮播图
 19404  225

好看的动画切换,底部带进度条

jQuery全屏进度条自动切换有随机切换轮播图
  幻灯片和轮播图
 26371  337

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

    )半人半灵的半吊子☆ 0
    2020/10/2 17:51:36
    有办法把左右两边的箭头按照图片大小更改吗😫
        西瓜1
        2020/10/2 19:45:31

        可以,修改样式,主要以下几个参数

        .sw-next-prev {
            font-family: 宋体;
            height: 30px;
            width: 30px;
            line-height: 30px;
            font-size: 20px;
        }
        )半人半灵的半吊子☆0
        2020/10/10 16:13:54
        抱歉我的意思是figure占位太大,图片不够大导致上下左右都有很大的空白,能不能缩小figure的大小?
    回复
    pusgo 0
    2020/6/7 14:27:29
    怎样能调整为正方形 回复
    唯★美秋@之恋? 0
    2019/11/11 9:49:51
    点击一下轮播的父元素 轮播功能的两个轮播按钮就失效了 怎么解决?
        月季?0
        2020/2/18 15:49:51
        你解决了吗?
        月季?0
        2020/2/18 15:50:09
        怎么解决?
    回复
    ?非凡灬 0
    2019/7/11 14:31:27
    顾北清歌寒* 0
    2019/2/23 11:43:39
    怎样关闭自动轮播?
        风言枫语1
        2019/3/4 17:52:57
        $(dom).swipeslider({
            // autoPlay:true,
            prevNextButtons: false,
            bullets: true,
            sliderHeight: '55%'
        });
        鹏程万里0
        2023/10/17 11:00:39
        $(dom).swipeslider({
            autoPlay:false,
            prevNextButtons: false,
            bullets: true,
        });
    回复
    烛光剪影 0
    2019/2/18 11:28:34
    轮播时怎么添加监听事件 回复
    茶、清味 0
    2018/10/17 10:36:32
    只有一张图片就不滚动,怎么改 回复
    看见好吃的走不动 0
    2018/9/19 17:12:02
    动态添加li,不能一直轮播,如何解决。 回复
    张庆刚 0
    2018/8/31 15:45:03
    艹,注册登录了,直接提示“下载过于频繁” 回复
    Wang 0
    2018/8/30 16:32:57
    为什么在苹果手机一滚动整个页面都在动???
        Chunacy0
        2019/7/8 11:23:46
        请问这个问题解决了么 我也遇到这个问题了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复