Tad 教材網 - 線上書籍

:::

Groundwork CSS
==============

###  滑動內容

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

:::