hubSlider是一款jQuery和CSS3超酷3D堆叠式幻灯片插件。该幻灯片将各个slide堆叠在一起，利用jquery，CSS3 transforms和transitions来制作上下切换的堆叠幻灯片效果。

安装

可以通过bower来安装该幻灯片。

bower install hubslider

使用方法

使用该幻灯片插件需要在页面中引入jquery，hubslider.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="jshubslider.js"></script>
HTML结构

该幻灯片的基本HTML结构如下：

<div class="hub-slider">

  <div class="hub-slider-slides">
    <ul>
      <li>Slide 1</li>
      <li>Slide 2</li>
      <li>Slide 3</li>
      <li>Slide 4</li>
      <li>Slide 5</li>
    </ul>
  </div>

  <div class="hub-slider-controls">
    <button class="hub-slider-arrow hub-slider-arrow_next">↑</button>
    <button class="hub-slider-arrow hub-slider-arrow_prev">↓</button>
  </div>

</div>
CSS样式

以下是该幻灯片的一些必要的CSS样式。

.hub-slider { position: relative; }

.hub-slider ul { list-style: none; }

.hub-slider ul li {
  width: 800px;
  height: 300px;
  background: #add8e6;
  position: absolute;
  left: 0;
  top: 0;
}

.hub-slider-controls {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}

.hub-slider-arrow {
  width: 40px;
  height: 40px;
  border: none;
  background: #f00;
  color: #fff;
  font-weight: bold;
}
初始化插件

在页面DOM元素加载完毕之后，可以通过hubSlider()方法来初始化该幻灯片插件。

$('.hub-slider-slides ul').hubSlider({
    selector: $('li'),
    button: {
        next: $('.hub-slider-arrow_next'),
        prev: $('.hub-slider-arrow_prev')
    }
});

配置参数

该幻灯片插件的可用的配置参数如下：

  • selector：幻灯片slide的选择器，默认为null。
  • button：前后导航按钮，button.next是向后按钮的选择器，button.prev是向前按钮的选择器。
  • auto：是否自动播放，默认为false。
  • time：自动播放的持续时间，默认为3秒。
  • opacity：当前幻灯片的透明度，默认为1。
  • opacityStep：透明度向后递减，默认为0.2。
  • startOffset：开始偏移值，默认为20像素。
  • offset：偏移值，默认为0。
  • scale：缩放值，默认为1。
  • scaleStep：slide向后递减缩小，默认为"0.05"。
  • transition：动画过渡时间，默认为"0.6s"。

hubSlider.js幻灯片插件的github地址为：https://github.com/hublabs/hubSlider