Slider

See more details about this slider in Slider JS plugin。

All rights of pictures used in following samples belong to Microsoft Bing.

Demos

Theme: default

  <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}' >
  <ul class="am-slides">
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
          <div class="am-slider-desc">这是标题标题标题标题标题标题标题0</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
          <div class="am-slider-desc">这是标题标题标题标题标题标题标题1</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
          <div class="am-slider-desc">这是标题标题标题标题标题标题标题2</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
          <div class="am-slider-desc">这是标题标题标题标题标题标题标题3</div>
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li data-thumb="https://amazeui.github.io/media/i/demos/bing-2.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li data-thumb="https://amazeui.github.io/media/i/demos/bing-2.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li data-thumb="https://amazeui.github.io/media/i/demos/bing-3.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li data-thumb="https://amazeui.github.io/media/i/demos/bing-4.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
          <div class="am-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
          <div class="am-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
          <div class="am-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
          <div class="am-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
          <div class="am-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
          <div class="am-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
          <div class="am-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
          <div class="am-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
          <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">1</span>/4</div>远方 有一个地方 那里种有我们的梦想</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
          <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">2</span>/4</div>某天 也许会相遇 相遇在这个好地方</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
          <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">3</span>/4</div>不要太担心 只因为我相信 终会走过这条遥远的道路</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
          <div class="am-slider-desc"><div class="am-slider-counter"><span class="am-active">4</span>/4</div>OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
          <div class="am-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
          <div class="am-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
          <div class="am-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
          <div class="am-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
         
      </li>
  </ul>
</div>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
          <div class="am-slider-desc"><h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2><a class="am-slider-more">了解更多</a></div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
          <div class="am-slider-desc"><h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2><a class="am-slider-more">了解更多</a></div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
          <div class="am-slider-desc"><h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2><a class="am-slider-more">了解更多</a></div>
         
      </li>
      <li>
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.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>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.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="https://amazeui.github.io/media/i/demos/bing-2.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="https://amazeui.github.io/media/i/demos/bing-3.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="https://amazeui.github.io/media/i/demos/bing-4.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>

Theme: 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="https://amazeui.github.io/media/i/demos/bing-1.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-1.jpg">
          <div class="am-slider-desc"><h2 class="am-slider-title">远方 有一个地方 那里种有我们的梦想</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div>
         
      </li>
      <li data-thumb="https://amazeui.github.io/media/i/demos/bing-2.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-2.jpg">
          <div class="am-slider-desc"><h2 class="am-slider-title">某天 也许会相遇 相遇在这个好地方</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div>
         
      </li>
      <li data-thumb="https://amazeui.github.io/media/i/demos/bing-3.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-3.jpg">
          <div class="am-slider-desc"><h2 class="am-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div>
         
      </li>
      <li data-thumb="https://amazeui.github.io/media/i/demos/bing-4.jpg">
        	<img src="https://amazeui.github.io/media/i/demos/bing-4.jpg">
          <div class="am-slider-desc"><h2 class="am-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p></div>
         
      </li>
  </ul>
</div>

Usage

Copy and Paste

Copy the codes in examples, and paste it to the <body> of the Amaze UI HTML template(Download);
Replace the contents in examples with your own contents.

Using Handlebars

The Handlebars partial of this widget is slider. See Accordion for more details.

Allmobilize WebIDE

Drag the widget to the edit interface;
Click the Data binding button on the right panel, and bind data using following format.

var content = [
  {
    "img": "",      // Source URL of image. Required.
    "link": "",     // Link of this image. Optional.
    "thumb": "",    // URL of thumbnail. Optional
    "desc": ""      // Additional information of this image. Support HTML.
  }
];

return content;

数据接口

{
  // id
  "id": "",

  // Customized Class
  "className": "",

  // Theme
  "theme": "",

  // Configuration. Use JSON to config the slider.
  "sliderConfig": "{}",

  //Content (* means required)
  "content": [
    {
      "img": "",      // Source URL of image. Required.
      "link": "",     // Link of this image. Optional.
      "className": "",
      "thumb": "",    // URL of thumbnail. Optional
      "desc": ""      // Additional information of this image. Support DOM object.
    }
  ]
}

Slider Configuration

Attentions: Callback function can't be passed through JSON string. Please use slider through JS if callback is needed:

Add the am-slider-manual class to disable the default initialization;
Initialize slider menually in JS.

$(function() {
  $('.am-slider-manual').flexslider({
  // options
  });
});

FAQ

Why does my slider crash in some browsers?

The quatation marks in example are encoded unnecessarily, which may cause some error. The solution is replacing the " to ".The codes copied using the Copy button has been using " since May, 15th, 2015。

<!-- Problem Codes -->
<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{&quot;controlNav&quot;:&quot;thumbnails&quot;,&quot;directionNav&quot;:false}'>

<!-- Correct Codes -->
<div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{"controlNav":"thumbnails","directionNav":false}'>

How to set width/height?

The widget doesn't provide width/height interface. But the width is set to 100%, and the height is decided by the contents. Please use css to change the width/height of container to adjust the width/height of this widget.

Web Components

Slider

TOC

Demos

Theme: default

Theme: default

Theme: default

Theme: default

Theme: a1

Theme: a2

Theme: a3

Theme: a4

Theme: a5

Theme: b1

Theme: b2

Theme: b3

Theme: b4

Theme: c1

Theme: c2

Theme: c3

Theme: c4

Theme: d1

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

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

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

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

Theme: d2

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

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

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

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

Theme: d3

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

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

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

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

Usage

Copy and Paste

Using Handlebars

Allmobilize WebIDE

数据接口

Slider Configuration

FAQ

Why does my slider crash in some browsers?

How to set width/height?

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

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

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

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

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

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

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

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

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

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

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

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