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

纯CSS3图片轮播效果

纯CSS制作的轮播效果,不用任何JS代码仅供新手参考。
  幻灯片和轮播图
 14280  20

基于swiper仿臭美app滑动效果

基于Swiper3.x安卓稍微有点卡仿臭美app滑动效果
  幻灯片和轮播图
 2417  20

精美的轮播图插件myFocus

myFocus轮播图插件可以选择袭击喜欢的样式及风格
  幻灯片和轮播图
 9435  49

jQuery仿京东首页轮播效果

京东首页轮播图
  幻灯片和轮播图
 14085  77

讨论这个项目(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

        是啊

    回复
取消回复