Slider

演示图标版权归微软 Bing 所有。

组件演示

default（默认）

  <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

default（标题）

这是标题标题标题标题标题标题标题0
这是标题标题标题标题标题标题标题1
这是标题标题标题标题标题标题标题2
这是标题标题标题标题标题标题标题3

  <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;slideshow&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
        <div class="am-slider-desc">这是标题标题标题标题标题标题标题0</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
        <div class="am-slider-desc">这是标题标题标题标题标题标题标题1</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
        <div class="am-slider-desc">这是标题标题标题标题标题标题标题2</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
        <div class="am-slider-desc">这是标题标题标题标题标题标题标题3</div>
      </li>
  </ul>
</div>

default（多图）

  <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;animationLoop&quot;:false,&quot;itemWidth&quot;:200,&quot;itemMargin&quot;:5}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li data-thumb="http://amazeui.p2hp.com/static/images/002.jpg">
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

default（缩略图）

  <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;controlNav&quot;:&quot;thumbnails&quot;}' >
  <ul class="am-slides">
      <li data-thumb="http://amazeui.p2hp.com/static/images/001.jpg">
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li data-thumb="http://amazeui.p2hp.com/static/images/002.jpg">
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li data-thumb="http://amazeui.p2hp.com/static/images/003.jpg">
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li data-thumb="http://amazeui.p2hp.com/static/images/004.jpg">
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

a1（圆形控制点）

  <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

a2（方形控制点）

  <div data-am-widget="slider" class="am-slider am-slider-a2" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

a3（底部黑边圆形控制点）

  <div data-am-widget="slider" class="am-slider am-slider-a3" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

a4（底部白边圆形控制点）

  <div data-am-widget="slider" class="am-slider am-slider-a4" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

a5（长条等分控制点）

  <div data-am-widget="slider" class="am-slider am-slider-a5" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

b1（方形居中左右箭头）

  <div data-am-widget="slider" class="am-slider am-slider-b1" data-am-slider='{&quot;controlNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

b2（圆形居中左右箭头）

  <div data-am-widget="slider" class="am-slider am-slider-b2" data-am-slider='{&quot;controlNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

b3（图片外左右箭头）

  <div data-am-widget="slider" class="am-slider am-slider-b3" data-am-slider='{&quot;controlNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

b4（图片外左右圆形箭头）

  <div data-am-widget="slider" class="am-slider am-slider-b4" data-am-slider='{&quot;controlNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
      </li>
  </ul>
</div>

c1（标题+长条控制点）

远方有一个地方那里种有我们的梦想
某天也许会相遇相遇在这个好地方
不要太担心只因为我相信终会走过这条遥远的道路
OH PARA PARADISE 是否那么重要你是否那么地遥远

  <div data-am-widget="slider" class="am-slider am-slider-c1" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
        <div class="am-slider-desc">远方 有一个ճ方 那里种有我们的梦想</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
        <div class="am-slider-desc">某天 也许会ݯ遇 相遇在这个好地方</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
        <div class="am-slider-desc">不要太担心 Ծ因为我相信 终会走过这条遥远的道路</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
        <div class="am-slider-desc">OH PARA PARADISE 是否那Ӥ重要 你是否那么地遥远</div>
      </li>
  </ul>
</div>

c2（标题+方形控制点）

远方有一个地方那里种有我们的梦想
某天也许会相遇相遇在这个好地方
不要太担心只因为我相信终会走过这条遥远的道路
OH PARA PARADISE 是否那么重要你是否那么地遥远

  <div data-am-widget="slider" class="am-slider am-slider-c2" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
        <div class="am-slider-desc">远方 有一个ճ方 那里种有我们的梦想</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
        <div class="am-slider-desc">某天 也许会ݯ遇 相遇在这个好地方</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
        <div class="am-slider-desc">不要太担心 Ծ因为我相信 终会走过这条遥远的道路</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
        <div class="am-slider-desc">OH PARA PARADISE 是否那Ӥ重要 你是否那么地遥远</div>
      </li>
  </ul>
</div>

c3（标题+居中左右箭头）

1/4
远方有一个地方那里种有我们的梦想
2/4
某天也许会相遇相遇在这个好地方
3/4
不要太担心只因为我相信终会走过这条遥远的道路
4/4
OH PARA PARADISE 是否那么重要你是否那么地遥远

  <div data-am-widget="slider" class="am-slider am-slider-c3" data-am-slider='{&quot;controlNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.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://amazeui.p2hp.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://amazeui.p2hp.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://amazeui.p2hp.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>

c4（标题+居底左右箭头）

远方有一个地方那里种有我们的梦想
某天也许会相遇相遇在这个好地方
不要太担心只因为我相信终会走过这条遥远的道路
OH PARA PARADISE 是否那么重要你是否那么地遥远

  <div data-am-widget="slider" class="am-slider am-slider-c4" data-am-slider='{&quot;controlNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.com/static/images/001.jpg">
        <div class="am-slider-desc">远方 有一个ճ方 那里种有我们的梦想</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
        <div class="am-slider-desc">某天 也许会ݯ遇 相遇在这个好地方</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
        <div class="am-slider-desc">不要太担心 Ծ因为我相信 终会走过这条遥远的道路</div>
      </li>
      <li>
        <img src="http://amazeui.p2hp.com/static/images/004.jpg">
        <div class="am-slider-desc">OH PARA PARADISE 是否那Ӥ重要 你是否那么地遥远</div>
      </li>
  </ul>
</div>

d1（标题+底部圆形左右箭头）

远方有一个地方那里种有我们的梦想
了解更多
某天也许会相遇相遇在这个好地方
了解更多
不要太担心只因为我相信终会走过这条遥远的道路
了解更多
OH PARA PARADISE 是否那么重要你是否那么地遥远
了解更多

  <div data-am-widget="slider" class="am-slider am-slider-d1" data-am-slider='{&quot;controlNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.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://amazeui.p2hp.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://amazeui.p2hp.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://amazeui.p2hp.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>

d2（浮层标题+底部圆形控制点）

远方有一个地方那里种有我们的梦想
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多
某天也许会相遇相遇在这个好地方
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多
不要太担心只因为我相信终会走过这条遥远的道路
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多
OH PARA PARADISE 是否那么重要你是否那么地遥远
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
了解更多

  <div data-am-widget="slider" class="am-slider am-slider-d2" data-am-slider='{&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li>
        <img src="http://amazeui.p2hp.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://amazeui.p2hp.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://amazeui.p2hp.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://amazeui.p2hp.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>

d3（标题+缩略图导航）

远方有一个地方那里种有我们的梦想
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
某天也许会相遇相遇在这个好地方
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
不要太担心只因为我相信终会走过这条遥远的道路
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
OH PARA PARADISE 是否那么重要你是否那么地遥远
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内

  <div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{&quot;controlNav&quot;:&quot;thumbnails&quot;,&quot;directionNav&quot;:false}' >
  <ul class="am-slides">
      <li data-thumb="http://amazeui.p2hp.com/static/images/001.jpg">
        <img src="http://amazeui.p2hp.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://amazeui.p2hp.com/static/images/002.jpg">
        <img src="http://amazeui.p2hp.com/static/images/002.jpg">
        <div class="am-slider-desc"><h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容ᑁ容内容内</p></div>
      </li>
      <li data-thumb="http://amazeui.p2hp.com/static/images/003.jpg">
        <img src="http://amazeui.p2hp.com/static/images/003.jpg">
        <div class="am-slider-desc"><h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内p></div>
      </li>
      <li data-thumb="http://amazeui.p2hp.com/static/images/004.jpg">
        <img src="http://amazeui.p2hp.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>

使用方法

直接使用

拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 slider，使用细节参照折叠面板组件。

云适配 WebIDE

将组件拖入编辑界面；
点击右侧面板里的【数据采集】按钮，按以下格式采集数据。

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接口
    }
  ]
}

Slider 参数说明

注意：通过模块传递的JSON字符串参数无法传递 callback，如需传递 callback 函数，请手动启动 slider：

添加 am-slider-manual 类名，禁用模块默认的初始化函数；
在自定义脚本里调用 slider：

$(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='{&quot;controlNav&quot;:&quot;thumbnails&quot;,&quot;directionNav&quot;:false}'>

<!-- 正确代码 -->
<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{"controlNav":"thumbnails","directionNav":false}'>

如何设置宽、高？

组件本身不提供设置宽、高的接口，宽度是容器的 100%，高度由 slide 里的内容决定。如果需要手动设置宽、高，请通过 CSS 设置容器的宽、高实现。

Web 组件

Slider

目录

组件演示

default（默认）

default（标题）

default（多图）

default（缩略图）

a1（圆形控制点）

a2（方形控制点）

a3（底部黑边圆形控制点）

a4（底部白边圆形控制点）

a5（长条等分控制点）

b1（方形居中左右箭头）

b2（圆形居中左右箭头）

b3（图片外左右箭头）

b4（图片外左右圆形箭头）

c1（标题+长条控制点）

c2（标题+方形控制点）

c3（标题+居中左右箭头）

c4（标题+居底左右箭头）

d1（标题+底部圆形左右箭头）

远方 有一个地方 那里种有我们的梦想

某天 也许会相遇 相遇在这个好地方

不要太担心 只因为我相信 终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要 你是否那么地遥远

d2（浮层标题+底部圆形控制点）

远方 有一个地方 那里种有我们的梦想

某天 也许会相遇 相遇在这个好地方

不要太担心 只因为我相信 终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要 你是否那么地遥远

d3（标题+缩略图导航）

远方 有一个地方 那里种有我们的梦想

某天 也许会相遇 相遇在这个好地方

不要太担心 只因为我相信 终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要 你是否那么地遥远

使用方法

直接使用

使用 Handlebars

云适配 WebIDE

数据接口

Slider 参数说明

常见问题

在一些浏览器上出现闪退问题？

如何设置宽、高？

远方有一个地方那里种有我们的梦想

某天也许会相遇相遇在这个好地方

不要太担心只因为我相信终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要你是否那么地遥远

远方有一个地方那里种有我们的梦想

某天也许会相遇相遇在这个好地方

不要太担心只因为我相信终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要你是否那么地遥远

远方有一个地方那里种有我们的梦想

某天也许会相遇相遇在这个好地方

不要太担心只因为我相信终会走过这条遥远的道路

OH PARA PARADISE 是否那么重要你是否那么地遥远