根据github上的官方说明翻译
模块是可选的代码块扩展插件的核心,加入了更多的功能。这种模块化的架构使得代码更有条理,也可以让你只包括将要使用的功能,从而优化文件大小和性能。
1.淡出
该模块用淡入淡出过渡效果替换默认的 slide/swipe效果。可定制的属于:fade, fadeOutPreviousSlide 和 fadeDuration.
2.标题
允许你为幻灯片添加标题,标题会在幻灯片下面显示,一次只能显示一个标题。标题必须包含在.sp-caption类里面。
可定制的属于:fadeCaption 和captionFadeDuration.
3.全屏
允许你在支持html5全屏api的浏览器中全屏查看幻灯片。如果你的浏览器支持将会在幻灯片的右上角显示一个按钮。
可设置的属性:fullScreen 和 fadeFullScreen.
4.延迟加载
只有当当前幻灯片图片或者缩略图可见时该图片才会加载该图片,从而节省带宽,同时也使最开始的网页加载快很多
<div class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image1.jpg"/>
</div>
<div class="sp-slide">
<a href="http://bqworks.com">
<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image2.jpg"/>
</a>
</div>
<div class="sp-slide">
<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image3.jpg"/>
</div>
</div>
<div class="sp-thumbnails">
<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail1.jpg"/>
<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail2.jpg"/>
</div>
</div>
图像的src属性指向一个占位符,真正的图片的src属性将由data-src属性指定。当图片变得可见时,占位符图像将被实际的图像代替。你可以使用自带的滑块占位符图像,也可以创建自己的图像占位符。捆绑占位符图像位于dist/css/images/blank.gif,它是1*1的空白图像。
5.Retina
允许在高PPI屏幕中指定替代图片。注意:该模块不仅仅在retina屏幕起作用,还在高PPI屏幕中起作用。
高分辨率图片需要再data-retina属性中指定。
<div class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image1.jpg" data-src="path/to/image1@2x.jpg"/>
</div>
<div class="sp-slide">
<a href="http://bqworks.com">
<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image2.jpg" data-retina="path/to/image2@2x.jpg"/>
</a>
</div>
<div class="sp-slide">
<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image3.jpg" data-retina="path/to/image3@2x.jpg"/>
</div>
</div>
<div class="sp-thumbnails">
<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail1.jpg" data-retina="path/to/thumbnail1@2x.jpg"/>
<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail2.jpg" data-retina="path/to/thumbnail2@2x.jpg"/>
</div>
</div>
6.附带条件的图片
该模块可以针对不同的屏幕大小设置不同的图片
<div class="sp-slide">
<img class="sp-image" src="path/to/blank.gif"
data-src="path/to/image_default.jpg"
data-small="path/to/image_small.jpg"
data-medium="path/to/image_medium.jpg"
data-large="path/to/image_large.jpg"/>
</div>
data-small, data-medium 和 data-large三个属性的大小结点是由smallSize, mediumSize 和 largeSize三个函数属性确定的。默认的设置是480px,768px,1024px。
幻灯片大小 | 加载的图片 |
小于largeSize | data-large |
小于mediumSize | data-medium |
小于smallSize | data-small |
大于largeSize | 默认图片data-src |
单独为Retina屏幕设置
<div class="sp-slide">
<img class="sp-image" src="path/to/blank.gif"
data-src="path/to/image_default.jpg"
data-small="path/to/image_small.jpg"
data-medium="path/to/image_medium.jpg"
data-large="path/to/image_large.jpg"
data-retinasmall="path/to/image_retina_small.jpg"
data-retinamedium="path/to/image_retina_medium.jpg"
data-retinalarge="path/to/image_retina_large.jpg"/>
</div>
可设置的属于:smallSize, mediumSize 和 largeSize.
7.层
添加可以被定为、设置大小、添加动画的元素(文本或者HTML内容)
<div class="sp-slide">
<img class="sp-image" src="path/to/image.jpg"/>
<h3 class="sp-layer">
Lorem ipsum dolor sit amet
</h3>
<p class="sp-layer">
consectetur adipisicing elit
</p>
</div>
如上所见,层需要添加sp-layer类,但是可以是任何HTML元素。
下面是一个添加样式和动画效果的例子。
<div class="sp-slide">
<img class="sp-image" src="path/to/image.jpg"/>
<h3 class="sp-layer sp-black"
data-position="bottomLeft" data-horizontal="10%"
data-show-transition="left" data-show-delay="300" data-hide-transition="right">
Lorem ipsum dolor sit amet
</h3>
<p class="sp-layer sp-white sp-padding"
data-width="200" data-horizontal="center" data-vertical="40%"
data-show-transition="down" data-hide-transition="up">
consectetur adipisicing elit
</p>
<div class="sp-layer sp-static">Static content</div>
</div>
这里有几个预定义class样式定义层的样式。
层的位置、尺寸和东湖懂事通过data属性设置的。
预定义类:
设置图层所有时间可见
sp-black
设置黑色透明背景,字体为白色
sp-white
白色透明背景,字体为黑色
sp-padding
增加了10px的padding值
sp-rounded
设置了radius,使得边角圆润
Data属性:
data-width
设置层的宽度,如果没有设置,层适应内部内容的宽度
data-height
设置层的高度,如果没有设置,层适应内部内容的高度
data-depth
设置深度,相当于z-index
data-position
设置位置,默认'topLeft'
'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight', 'centerLeft', 'centerRight' and 'centerCenter'.
data-horizontal
水平位置。以data-position为基准点
data-vertical
垂直位置。以data-position为基准点
data-show-transition
设置幻灯片的过渡出现时移动的方向。可以设置'left', 'right', 'up' or 'down'
data-show-offset
设置了layer出现时候朝最终位置做动画时候的一个位置偏移,必须是一个固定的值
data-show-duration
设置过渡动画持续时间
data-show-delay
设置展示过渡延迟,延迟时间开始到新幻灯片开始的时间
data-hide-transition
设置消失的过渡方位,可以设置为 'left', 'right', 'up' or 'down'
data-hide-offset
设置消失时候从动画位置到最开始位置的一个数据偏移,需要设置固定值
data-hide-duration
隐藏的持续时间
data-hide-delay
隐藏的延迟时间
data-stay-duration
设置图层可见的持续时间
layers在大多数浏览器中使用CSS3过渡动画。在IE9和IE8(其中CSS3过渡不支持),各层将只淡入/淡出,而在IE7及以上层会出现没有任何动画。
可设置的函数属性:waitForLayers, autoScaleLayers and autoScaleReference.
8.深层链接
<div id="my-slider" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="path/to/image1.jpg"/>
</div>
<div id="my-slide" class="sp-slide">
<img class="sp-image" src="path/to/image2.jpg"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="path/to/image3.jpg"/>
</div>
</div>
</div>
为了打开第二张幻灯片,您可以使用http://domain.com/page#my-slider/1或http://domain.com/page#my-slider/my-slide。
可设置的函数属性:updateHash.
9.自动播放
自动播放功能
可设置的属性:autoplay, autoplayDelay, autoplayDirection 和 autoplayOnHover.
10.触摸滑动
可设置的属性:touchSwipe and touchSwipeThreshold.
11.按钮
导航按钮
相关属性:buttons.
12.箭头导航
相关属性:arrows and fadeArrows.
13.键盘箭头导航
相关属性: keyboard and keyboardOnlyOnFocus.
14.缩略图
增加了缩略图功能,缩略图可以包含所有的HTML内容。
两种添加缩略图的方法:
1、在sp-thumbnails里面添加
<div class="slider-pro">
<div class="sp-slides">
...
</div>
<div class="sp-thumbnails">
<img class="sp-thumbnail" src="path/to/thumbnail.jpg"/>
<p class="sp-thumbnail">Thumbnail 2</p>
<div class="sp-thumbnail">
<img class="sp-thumbnail-image" src="path/to/thumbnail.jpg"/>
<p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
</div>
</div>
</div>
2、在对应的sp-slide里面添加
<div class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="path/to/image1.jpg"/>
<img class="sp-thumbnail" src="path/to/thumbnail.jpg"/>
</div>
<div id="my-slide" class="sp-slide">
<img class="sp-image" src="path/to/image2.jpg"/>
<p class="sp-thumbnail">Thumbnail 2</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="path/to/image3.jpg"/>
<div class="sp-thumbnail">
<img class="sp-thumbnail-image" src="path/to/thumbnail.jpg"/>
<p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
</div>
</div>
</div>
</div>
15.缩略图触摸卡
16.缩略图箭头
设置的属于:thumbnailArrows and fadeThumbnailArrows.
17.视频
YouTube
<a class="sp-video" href="//www.youtube.com/watch?v=oaDkph9yQBs">
<img src="path/to/poster.jpg" width="500" height="300"/>
</a>
<iframe class="sp-video" src="http://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1&wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>
设置的属于:reachVideoAction, leaveVideoAction, playVideoAction, pauseVideoAction and endVideoAction.