:::

12. 滑動 Orbit

滑動內容

  • 用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>

 

 


:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D29%26tbdsn%3D844

書籍目錄

展開 | 闔起

線上使用者

1人線上 (1人在瀏覽線上書籍)

會員: 0

訪客: 1

更多…