图片轮播模块,更多细节参见 JS 插件中的介绍。
演示图标版权归微软 Bing 所有。
<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{"animation":"slide","slideshow":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc">这是标题标题标题标题标题标题标题0</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc">这是标题标题标题标题标题标题标题1</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc">这是标题标题标题标题标题标题标题2</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc">这是标题标题标题标题标题标题标题3</div>
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{"animation":"slide","animationLoop":false,"itemWidth":200,"itemMargin":5}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li data-thumb="http://www.amazeui.com/static/images/002.jpg">
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{"animation":"slide","controlNav":"thumbnails"}' >
<ul class="am-slides">
<li data-thumb="http://www.amazeui.com/static/images/001.jpg">
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li data-thumb="http://www.amazeui.com/static/images/002.jpg">
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li data-thumb="http://www.amazeui.com/static/images/003.jpg">
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li data-thumb="http://www.amazeui.com/static/images/004.jpg">
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-a2" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-a3" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-a4" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-a5" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-b1" data-am-slider='{"controlNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-b2" data-am-slider='{"controlNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-b3" data-am-slider='{"controlNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-b4" data-am-slider='{"controlNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-c1" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc">远方 有一个ճ方 那里种有我们的梦想</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc">某天 也许会ݯ遇 相遇在这个好地方</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc">不要太担心 Ծ因为我相信 终会走过这条遥远的道路</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc">OH PARA PARADISE 是否那Ӥ重要 你是否那么地遥远</div>
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-c2" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc">远方 有一个ճ方 那里种有我们的梦想</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc">某天 也许会ݯ遇 相遇在这个好地方</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc">不要太担心 Ծ因为我相信 终会走过这条遥远的道路</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc">OH PARA PARADISE 是否那Ӥ重要 你是否那么地遥远</div>
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-c3" data-am-slider='{"controlNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">1</span>/4</div>远方 有一个地方 那里OCD;有我们的梦想</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">2</span>/4</div>某天 也许会相遇 相遇在这个好地方</div><
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">3</span>/4</div>不要太担心 只因为我LF8;信 终会走过这条遥远的道路</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">4</span>/4</div>OH PARA PARADISE 是否那么重要 你ʖF;否那么地遥远</div>
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-c4" data-am-slider='{"controlNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc">远方 有一个ճ方 那里种有我们的梦想</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc">某天 也许会ݯ遇 相遇在这个好地方</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc">不要太担心 Ծ因为我相信 终会走过这条遥远的道路</div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc">OH PARA PARADISE 是否那Ӥ重要 你是否那么地遥远</div>
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-d1" data-am-slider='{"controlNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2><a class="am-slider-more">了解更多</a></div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2><a class="am-slider-more">了解更多</a></div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2><a class="am-slider-more">了解更多</a></div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2><a class="am-slider-more">了解更多</a></div>
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-d2" data-am-slider='{"directionNav":false}' >
<ul class="am-slides">
<li>
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc"><div class="am-slider-content"><h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div><a class="am-slider-more">了解更多</a></div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc"><div class="am-slider-content"><h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div><a class="am-slider-more">E86;解更多</a></div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc"><div class="am-slider-content"><h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div><a class="am-slider-more">了解更多a></div>
</li>
<li>
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc"><div class="am-slider-content"><h2 class="am-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div><a class="am-slider-more">了解更多</a></div>
</li>
</ul>
</div>
<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{"controlNav":"thumbnails","directionNav":false}' >
<ul class="am-slides">
<li data-thumb="http://www.amazeui.com/static/images/001.jpg">
<img src="http://www.amazeui.com/static/images/001.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内BB9;内容内容内</p></div>
</li>
<li data-thumb="http://www.amazeui.com/static/images/002.jpg">
<img src="http://www.amazeui.com/static/images/002.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容ᑁ容内容内</p></div>
</li>
<li data-thumb="http://www.amazeui.com/static/images/003.jpg">
<img src="http://www.amazeui.com/static/images/003.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内p></div>
</li>
<li data-thumb="http://www.amazeui.com/static/images/004.jpg">
<img src="http://www.amazeui.com/static/images/004.jpg">
<div class="am-slider-desc"><h2 class="am-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内BB9;内容内容内</p></div>
</li>
</ul>
</div>
<body>
区域;本组件 Handlebars partial 名称为 slider
,使用细节参照折叠面板组件。
var content = [
{
"img": "", // 表示轮播图片的路径,如:xxx.src() ,必传
"link": "", // 链接,可选
"thumb": "", // 如果需要,添加缩略图,填写缩略图的地址
"desc": "" // 当前图片的附加信息,支持 HTML,为高级定制提供 HTML 接口
}
];
return content;
{
// id
"id": "",
// 自定义 class
"className": "",
// 主题
"theme": "",
// 配置,根据需求进行设置,传递 JSON 字符串
"sliderConfig": "{}",
//内容(*为必备项)
"content": [
{
"img": "",
"link": "", // 链接
"className": "",
"thumb": "", // 缩略图
"desc": "" // 附加信息,支持DOM,为高级定制提供DOM接口
}
]
}
注意:通过模块传递的JSON字符串参数无法传递 callback,如需传递 callback 函数,请手动启动 slider:
am-slider-manual
类名,禁用模块默认的初始化函数;$(function() {
$('.am-slider-manual').flexslider({
// options
});
});
示例代码中的引号做了不必要的 encode,导致解析参数时出错,解决方法是把 "
替换成 "
。从 2015.05.15 开始,通过 Copy
按钮拷贝的代码已经自动替换引号。
由于 Handlebars.js 的安全机制,暂时无法在显示层面修复。
<!-- 问题代码 -->
<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{"controlNav":"thumbnails","directionNav":false}'>
<!-- 正确代码 -->
<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{"controlNav":"thumbnails","directionNav":false}'>
组件本身不提供设置宽、高的接口,宽度是容器的 100%
,高度由 slide 里的内容决定。如果需要手动设置宽、高,请通过 CSS 设置容器的宽、高实现。