12. 滑動 Orbit

滑動內容

用class="slider"即可
可以用網頁、圖片或callout盒子
若要加上補充文字，加上 data-caption="#ID 即可。在<div class="slider">外面加上補充文字，並用<span class="orbit-caption" id="ID">包起來即可（ID要互相對應）。class="orbit-caption" 會自動將 span 隱藏起來。

01<div class="slider">
02  <img src="http://placehold.it/1200x400/24cada/ffffff/&text=Slide+1" alt="" data-caption="#captionOne" />
03  <img src="http://placehold.it/1200x400/bada55/ffffff/&text=Slide+2" alt="" />
04  <img src="http://placehold.it/1200x400/c82647/ffffff/&text=Slide+3" alt="" />
05  <img src="http://placehold.it/1200x400/198d98/ffffff/&text=Slide+4" alt="" />
06 
07  <div class="callout">
08    <h1>滑動內容</h1>
09    <p>This slide has HTML content instead of an image and has also had <code class="inline">.callout</code> applied to it.</p>
10    <p><a href="#" class="success button">Click Me</a></p>
11  </div>
12 
13  <div class="warning callout">
14    <h1>另一個滑動內容</h1>
15    <p>This slide has HTML content instead of an image and has also had <code class="inline">.warning.callout</code> applied to it.</p>
16    <p><a href="#" class="large button">Click Me</a></p>
17  </div>
18</div>
19<span class="orbit-caption" id="captionOne">圖片補充文字...</span>