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

使用方法

  • 确保你使用的图片的尺寸大小一样。
  • 使用一个 idslidy-containerdiv作为wrapper,里面放置一个 idslidyfigure,最后在 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/