osSlider是一款简单实用的带各种百叶窗过渡效果的jQuery幻灯片插件。该幻灯片插件在slide过渡时随机生成各种百叶窗效果，它使用简单，通过简单的设置即可正常工作。

使用方法

使用该幻灯片插件需要在页面中引入jQuery(1.8+)和osSlider.css以及osSlider.js文件。

<link rel="stylesheet" href="css/osSlider.css" />
<script src="js/jquery.min.js"></script>
<script src="js/osSlider.js"></script>
HTML结构

该幻灯片的基本HTML结构是使用一个<div>容器来包裹一个无序列表。无序列表中每一项是一个幻灯片slide。

<div class="slider">
  <ul class="slider-main">
    <li>
      <img src="1.jpg" alt="">
    </li>
    <li>
      <img src="2.jpg" alt="">
    </li>
    <li>
      <img src="3.jpg" alt="">
    </li>
    <li>
      <img src="4.jpg" alt="">
    </li>
  </ul>
</div>
初始化插件

该幻灯片插件采用构造函数编写，使用时需要实例化。

var slider = new osSlider({
    pNode:'.slider',
    cNode:'.slider-main li',
    speed:3000,
    autoPlay:true
});

配置参数

  • pNode：轮播容器选择器，必填。
  • cNode：轮播体的选择器，必填。
  • speed：动画速度，默认值3000，选填。
  • autoPlay：是否自动播放，默认值为true。

注意事项

该幻灯片插件class选择器已有 .osSlider-main， .slider-btn， .slider-btn-prev， .slider-btn-next， .slider-nav 请勿冲突。

该版本不具备响应式功能。

轮播的导航(.slider-nav)与切换按钮(.slider-btn)由插件自动生成