Web 组件

Slider

组件演示

default（默认）

<div data-wd-widget="slider" class="wd-slider wd-slider-default" data-wd-slider='{}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

default（标题）

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

<div data-wd-widget="slider" class="wd-slider wd-slider-default" data-wd-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;slideshow&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">这是标题标题标题标题标题标题标题0</div>
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">这是标题标题标题标题标题标题标题1</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">这是标题标题标题标题标题标题标题2</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">这是标题标题标题标题标题标题标题3</div>
    </li>
  </ul>
</div>

default（多图）

<div data-wd-widget="slider" class="wd-slider wd-slider-default" data-wd-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;animationLoop&quot;:false,&quot;itemWidth&quot;:200,&quot;itemMargin&quot;:5}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li data-thumb="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

default（缩略图）

<div data-wd-widget="slider" class="wd-slider wd-slider-default" data-wd-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;controlNav&quot;:&quot;thumbnails&quot;}'>
  <ul class="wd-slides">
    <li data-thumb="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li data-thumb="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li data-thumb="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li data-thumb="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

a1（圆形控制点）

<div data-wd-widget="slider" class="wd-slider wd-slider-a1" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

a2（方形控制点）

<div data-wd-widget="slider" class="wd-slider wd-slider-a2" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

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

<div data-wd-widget="slider" class="wd-slider wd-slider-a3" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

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

<div data-wd-widget="slider" class="wd-slider wd-slider-a4" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

a5（长条等分控制点）

<div data-wd-widget="slider" class="wd-slider wd-slider-a5" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

b1（方形居中左右箭头）

<div data-wd-widget="slider" class="wd-slider wd-slider-b1" data-wd-slider='{&quot;controlNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

b2（圆形居中左右箭头）

<div data-wd-widget="slider" class="wd-slider wd-slider-b2" data-wd-slider='{&quot;controlNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

b3（图片外左右箭头）

<div data-wd-widget="slider" class="wd-slider wd-slider-b3" data-wd-slider='{&quot;controlNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

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

<div data-wd-widget="slider" class="wd-slider wd-slider-b4" data-wd-slider='{&quot;controlNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
    </li>
  </ul>
</div>

c1（标题+长条控制点）

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

<div data-wd-widget="slider" class="wd-slider wd-slider-c1" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

c2（标题+方形控制点）

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

<div data-wd-widget="slider" class="wd-slider wd-slider-c2" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

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

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

<div data-wd-widget="slider" class="wd-slider wd-slider-c3" data-wd-slider='{&quot;controlNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-counter">
          <span class="wd-active">1</span>/4</div>远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-counter">
          <span class="wd-active">2</span>/4</div>某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-counter">
          <span class="wd-active">3</span>/4</div>不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-counter">
          <span class="wd-active">4</span>/4</div>OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

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

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

<div data-wd-widget="slider" class="wd-slider wd-slider-c4" data-wd-slider='{&quot;controlNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">远方 有一个地方 那里种有我们的梦想</div>
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">某天 也许会相遇 相遇在这个好地方</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">不要太担心 只因为我相信 终会走过这条遥远的道路</div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">OH PARA PARADISE 是否那么重要 你是否那么地遥远</div>
    </li>
  </ul>
</div>

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

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

<div data-wd-widget="slider" class="wd-slider wd-slider-d1" data-wd-slider='{&quot;controlNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">远方 有一个地方 那里种有我们的梦想</h2>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">某天 也许会相遇 相遇在这个好地方</h2>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
  </ul>
</div>

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

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

<div data-wd-widget="slider" class="wd-slider wd-slider-d2" data-wd-slider='{&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-content">
          <h2 class="wd-slider-title">远方 有一个地方 那里种有我们的梦想</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-content">
          <h2 class="wd-slider-title">某天 也许会相遇 相遇在这个好地方</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-content">
          <h2 class="wd-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
    <li>
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">
        <div class="wd-slider-content">
          <h2 class="wd-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
        </div>
        <a class="wd-slider-more">了解更多</a>
      </div>
    </li>
  </ul>
</div>

d3（标题+缩略图导航）

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

<div data-wd-widget="slider" class="wd-slider wd-slider-d3" data-wd-slider='{&quot;controlNav&quot;:&quot;thumbnails&quot;,&quot;directionNav&quot;:false}'>
  <ul class="wd-slides">
    <li data-thumb="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <img src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">远方 有一个地方 那里种有我们的梦想</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
    <li data-thumb="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <img src="http://s.cn.bing.net/az/hprichbg/rb/MovingWalkway_ZH-CN9842297711_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">某天 也许会相遇 相遇在这个好地方</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
    <li data-thumb="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <img src="http://global.bing.com/az/hprichbg/rb/UchisarCastle_EN-US10838608428_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">不要太担心 只因为我相信 终会走过这条遥远的道路</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
    <li data-thumb="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <img src="http://global.bing.com/az/hprichbg/rb/DumbartonOaksGardens_EN-US12360736195_1920x1080.jpg">
      <div class="wd-slider-desc">
        <h2 class="wd-slider-title">OH PARA PARADISE 是否那么重要 你是否那么地遥远</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>
      </div>
    </li>
  </ul>
</div>

使用方法

直接使用

拷贝演示中的代码，粘贴到旺道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：

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

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

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 是否那么重要你是否那么地遥远