滑块Slider
滑块可添加图片元素或HTML内容,支持移动端触滑功能
<div class="slider">
<ul class="content">
<li><img src="imgurl"></li>
<li><img src="imgurl"></li>
<li><img src="imgurl"></li>
</ul>
</div>
标题Heading
为<li>元素添加data-title属性设定滑块标题
<div class="slider">
<ul class="content">
<li data-title="Aurora over Jokulsarlon"><img src="imgurl"></li>
<li data-title="Beach Ice"><img src="imgurl"></li>
<li data-title="A Moraine Morning"><img src="imgurl"></li>
</ul>
</div>
自定义内容Custom
可任意添加文本内容
<div class="slider">
<ul class="content">
<li>
<div class="bg-blue c-fff" style="padding:1rem;">
<h5>Benefits of registration include:</h5>
<ol class="baselist">
<li>Check your order status</li>
<li>Fast and easy checkout</li>
<li>Track order status and history</li>
<li>Store your shipping and billing addresses to save time on your next purchase</li>
</ol>
</div>
</li>
<li>
<div class="bg-green c-fff" style="padding:1rem;">
<h5>Benefits of registration include:</h5>
<ol class="baselist">
<li>Check your order status</li>
<li>Fast and easy checkout</li>
<li>Track order status and history</li>
<li>Store your shipping and billing addresses to save time on your next purchase</li>
</ol>
</div>
</li>
</ul>
</div>
播放间隔Play Timeout
添加data-play-timeout属性设定滑块的播放间隔时间,单位是ms毫秒,默认值为3000,可设定的最小值为500
<div class="slider" data-play-timeout="1000">
...
</div>
停止播放Play Stop
添加data-play-stop属性使滑块停止自动播放
<div class="slider" data-play-stop>
...
</div>
当前内容版权归 diquick.com 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 diquick.com .