jQuery响应式水平滚动旋转木马插件

Carousel.js是一款非常实用的jQuery响应式水平滚动旋转木马插件。它使用简单，样式可以完全自定义，并且会随屏幕的大小自适应容器的宽度和高度。

使用方法

使用该旋转木马插件要引入jQuery和jquery-carousel.js文件。

<script src="js/jquery-1.11.0.min.js"></script>
<script src="jquery-carousel.js"></script>                
              

HTML结构

该旋转木马的基本HTML结构如下：

<div id="slider-carousel">
  <div class="wrapper-setas">
    <a href="#" class="seta-dir setaDir">
      <em class="sprite seta-pag-dir-md"></em>
    </a> 
    <a href="#" class="seta-esq setaEsq">
      <em class="sprite seta-pag-esq-md"></em>
    </a>
    <div class="clear"></div>
  </div>

  <!-- Slider content -->
  <div id="container-slider-carousel" class="container">
    <div id="content-silder-carousel" class="content">
      <div class="wrapper-itens">
        <div class="item"><span><img src="l.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="2.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="3.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="4.jpg" alt="" class="img-responsive"></span></div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>
              

CSS样式

需要为该旋转木马插件添加下面的必要的CSS样式，其他的CSS样式可以根据需要自定义。

.clear {
  clear: both !important;
  float: none !important;
  margin: 0px !important;
  padding: 0px !important;
  height: 0px !important;
  width: 0px !important
}

.img-responsive {
  height: auto;
  width: 100%;
}

#slider-carousel {
  position: relative;
  width: 100%;
  padding: 10px 0 0 0;
  margin-bottom: 5px;
}

#container-slider-carousel {
  width: 620px;
  position: relative;
  overflow: hidden;
  height: auto;
}

#content-silder-carousel {
  width: 5000px;
  position: relative;
  left: 0;
}

#content-silder-carousel .item {
  width: 200px;
  float: left;
  background-color: #CCC;
  margin-right: 10px;
}

#slider-carousel .wrapper-setas { margin: 0 0 10px 0; }

#slider-carousel .wrapper-setas a {
  float: right;
  margin-left: 10px;
}      
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该旋转木马插件。

$("#slider-carousel").carousel({

  // 回调函数
  activate: function(){}, 

  // 动画的速度
  timerAnimSlide:400, 

  // 无限循环模式
  infinite:true, 

  // 点击左右箭头导航按钮时移动的旋转木马项的数量
  itensMove:1,

  // 旋转木马项的宽度
  resizeItem:{width:50}, 

  // 旋转木马的最小宽度
  responsive:{minWidth:645}
  
}