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

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

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

js轮播图插件slider

支持鼠标滑动以及移动端手势滑动的幻灯片播放插件
  幻灯片和轮播图
 6910  70
  幻灯片和轮播图
 8803  85

jQuery幻灯插件

号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义
  幻灯片和轮播图
 13016  73

完美左右切换

完美左右切换代码简单容易修改。
  幻灯片和轮播图
 19638  136

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

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

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

    回复
    女神收割机 0
    2017/10/18 13:45:48

    怎么不能下载

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

        meiyoujqbi

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

        需要井壁

    回复
    Change 0
    2017/9/21 10:53:17

    怎么不能下载了??不是吧?

        0
        2017/10/10 10:28:49

        可以下载但是需要jq币,jq币要么充值要么发布资源或者回答问题

        做好自己0
        2017/12/1 9:16:44

        恩恩

    回复
    时光。 0
    2017/9/6 9:10:16

    不能下载,好气啊

        。假装斯文0
        2017/9/7 10:35:00

        是啊

        huahuaniu0
        2017/9/11 9:37:31

        怎么不能下载了

        MY11120
        2017/9/11 15:35:18

        就是

        好久不见0
        2017/10/31 14:01:43

        是啊

    回复
取消回复