jQuery响应式浮动轮播插件floatingCarousel.js

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

 36485  359  查看评论 (31)
分享到微信朋友圈
X
jQuery响应式浮动轮播插件floatingCarousel.js ie兼容10

使用方法

1、HTML

<div class="carousel" id="carousel-default">
  <ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
    <li><span>8</span></li>
    <li><span>9</span></li>
    <li><span>10</span></li>
  </ul>
</div>

2、使用默认设置初始化

$('#carousel-default').floatingCarousel();

3、自适应轮播创建

var opts = {
    // options here
},
responsiveCarousel = $('#carousel-default').floatingCarousel(opts);
$(window).resize($.debounce(100, function () {
  responsiveCarousel.update(opts);
}));

4、所有配置选项

$('#carousel-default').floatingCarousel({
  // auto scroll
  autoScroll : false,
  // or 'right'
  autoScrollDirection : 'left',
  // scroll speed in milliseconds
  autoScrollSpeed : 10000,
  // initial CSS class
  initClass: 'floatingCarouselContainer',
  // infinite loop
  looped : true,
  // or 'vertical'
  scrollerAlignment : 'horizontal',
  // scroll offset in pixels
  scrollerOffset : 0,
  // or 'slow', 'fast'
  scrollSpeed : 'medium',
  // enable touch events
  enableTouchEvents : true,
  // prevent unwanted page scrolling during touch events
  touchOverflowHidden : true,
  // reverse the the direction on touch
  reverseOnTouch : true  
});

5、回调函数

$('#carousel-default').floatingCarousel({
  beforeCreateFunction : null,
  afterCreateFunction : null
});
相关插件-幻灯片和轮播图,滑块和旋转

魔兽世界轮播图

很简单的一款小插件 希望大家喜欢
  幻灯片和轮播图
 27111  296

移动端web端图片轮播

移动端web端图片轮播插件,可左右滑动切换,自动切换
  幻灯片和轮播图
 70119  438

CSS3全屏3D画布图片切换特效

CSS3全屏3D画布图片切换特效是一款基于JS+CSS3实现的带左右按钮的控制全屏图片切换代码。
  幻灯片和轮播图
 29749  359

jQuery轮播图切换插件slick.js

slick.js实现图片轮播图渐隐切换动画特效,支持移动端滑动切换
  幻灯片和轮播图
 58462  362

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

    faded、 0
    2023/10/12 17:25:00
    如何添加手动滚动(上下滑动屏幕可滚动) 回复
    faded、 0
    2023/10/12 17:23:39
    碎末 0
    2020/5/13 9:36:26
    不知道会不会有兼容性 回复
    刘超/誉商 0
    2019/11/9 15:24:59
    请问怎么修改鼠标放上去后暂停 回复
    二二 0
    2019/10/18 11:24:12
    请问这个插件在angular中如何使用 回复
    高清电台微博 0
    2019/4/20 10:29:59
    控制台提示错误:Uncaught TypeError: $.debounce is not a function
    但是基本上布影响使用。
        西瓜0
        2019/4/20 12:47:51
        可以删除158行到160行代码,就不会报错了。
        高清电台微博0
        2019/4/24 21:15:18
        谢谢~~~
    回复
    mandy1206 0
    2019/4/10 16:54:48
    不能下载
        暖暖qaz0
        2019/4/25 15:11:12
        需要回答他人问题,赚取币
    回复
    嘴角上扬が??? 0
    2018/6/12 11:14:27
    怎么下载啊‘
        yúzhìchāo0
        2018/8/23 15:00:36
        回答他人问题
    回复
    安、沫楚 0
    2017/11/8 11:32:56

    下载需要完成人物好气好气好气

        Handsome0
        2019/6/13 17:04:36
        好气</>
    回复
    女神收割机 0
    2017/10/18 13:45:48

    怎么不能下载

        骑士荣耀0
        2017/11/3 11:28:23

        meiyoujqbi

        安、沫楚0
        2017/11/8 11:35:32

        需要井壁

        碎末0
        2020/5/13 9:37:23
        jq币
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复