線上書籍

滑動內容

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

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