CSSslidy是一款使用CSS和js制作的自动生成响应式的轮播图插件。

使用方法

  • 确保你使用的图片的尺寸大小一样。
  • 使用一个 id 为 slidy-container 的div作为wrapper，里面放置一个 id 为 slidy 的figure，最后在 figure 里面放置图片。 
    <div id="slidy-container">
  <figure id="slidy">
    <img src="antelope-canyon.jpg" alt data-caption="">
    <img src="canyonlands.jpg" alt data-caption="" >
    <img src="mesa-arch.jpg" alt data-caption="">
    <img src="wave-canyon.jpg" alt data-caption="">
    </figure>
</div>

    id的值是可以改变的，改变后在调用时，参数也要相应的改变。

  • 在页面底部添加cssslidy.js文件。
  • 使用cssSlidy()方法调用插件。 
    <script> cssSlidy(); </script>

自定义配置

你可以通过一些参数来自定义这个CSS轮播图插件。

可用参数

参数 类型 默认值 描述
timeOnSlide number 3 轮播图每次轮播的时间（单位秒）
timeBetweenSlides number 1 轮播图每次过渡的时间（单位秒）
slidyContainerSelector string '#slidy-container' 定义包裹元素的ID
slidySelector string '#slidy' 定义slidy元素的ID
slidyDirection string 'left' 定义轮播图滑动的方向，可选'left'和'right'
captionSource string 'data-caption' 定义轮播图图片标题的html元素属性。可选：'data-caption'，'alt'，'none'
captionBackground string 'rgba(0,0,0,0.3)' 定义轮播图图片标题的背景颜色。
captionFont string 'Avenir, Avenir Next, Droid Sans, DroidSansRegular, Corbel, Tahoma, Geneva, sans-serif' 定义轮播图图片标题的字体。
captionColor string '#fff' 定义轮播图图片标题的字体颜色。
captionPosition string 'bottom' 定义轮播图图片标题的位置。可选：'bottom'，'top'
captionAppear string 'slide' 定义轮播图鼠标滑过时图片标题的动画方式。可选：'slide'，'perm（permanent）','fade'
captionSize string '1.6rem' 定义轮播图图片标题的字体大小。可设置为任何可用的CSS单位值。
captionPadding string '.6rem' 定义轮播图图片标题的padding。可设置为任何可用的CSS单位值。
fallbackFunction function function(){} 定义轮播图的CSS动画不被支持时的回调函数。
cssAnimationName string 'slidy' 定义CSS动画的名称。 
@media screen and (max-width: 600px) { 
  #slidy-container figcaption { 
    font-size: 1rem !important; 
  } 
}

更多资料请参考：https://github.com/dudleystorey/CSSslidy/