UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

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

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

 36335  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
});
相关插件-幻灯片和轮播图,滑块和旋转
查看更多

点击 放大 焦点图

 点击箭头内容放大
  幻灯片和轮播图
 51686  479

简洁优雅，与众不同的轮播图插件

 代码简洁优雅，与其他插件不同，包括各样式轮播图
  幻灯片和轮播图
 31205  402

简单实用的全屏轮播

 有多重选项，配置迅速，十分实用
  幻灯片和轮播图
 45116  382

基于jquey实现的轮播插件(原创)

 基于jquey实现的轮播插件(支持左右箭头、圆点按钮、触摸切换、自动轮播)简单易用
  幻灯片和轮播图
 30090  279

讨论这个项目（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币
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复