# 幻燈片/Slideshow 創建可以全屏模式和遮罩效果的，具有炫酷過渡效果的響應式圖片或視頻幻燈片。 ## 用法 要創建幻燈片，只需要添加 `.uk-slideshow` 類到一個 `&lt;ul&gt;` 元素中，并將你的圖片放入列表條目內。為了加載必要的JavaScript，還需要添加 `data-uk-slideshow` 屬性。 注意 使用此組件需要額外添加 `slideshow.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `slideshow.js` 文件，在`js/components`文件夾中。 ### Example  注意 如果需要自動播放，為data屬性添加 `{autoplay:true}` 選項就行了。 ### Markup ``` <ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}"> <li><img src="" width="" height="" alt=""></li> </ul> ``` * * * ## 導航/Navigations 在幻燈片中進行導航，使用 `data-uk-slideshow-item` 屬性就行。為了能指向幻燈片，你必須為每個導航單元設置data屬性指向每個幻燈片單元的序號。帶有 `data-uk-slideshow-item` 屬性的元素需要被放置在帶有 `data-uk-slideshow` 的容器中。 ### Markup ``` <div data-uk-slideshow> <ul class="uk-slideshow"> <li></li> <li></li> </ul> <li data-uk-slideshow-item="0"><a href="">...</a></li> <li data-uk-slideshow-item="1"><a href="">...</a></li> </div> ``` 將data屬性設置為 `next` and `previous` 就能進行相鄰幻燈片之間的切換。像這樣： ### Markup ``` <div data-uk-slideshow> <ul class="uk-slideshow"> <li></li> <li></li> </ul> <a href="" data-uk-slideshow-item="previous"></a> <a href="" data-uk-slideshow-item="next"></a> </div> ``` * * * ### 滑動導航和圓點導航 幻燈片組件的靈活性使之可以用任何其他UIkit組件進行幻燈片的導航。比如[滑動導航](slidenav.html)和[圓點導航](dotnav.html)可以用來像下面這樣作為幻燈片的導航。 #### Example  #### Markup ``` <div class="uk-slidenav-position" data-uk-slideshow> <ul class="uk-slideshow"> <li></li> <li></li> </ul> <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a> <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a> <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-text-center"> <li data-uk-slideshow-item="0"><a href=""></a></li> <li data-uk-slideshow-item="1"><a href=""></a></li> </ul> </div> ``` * * * ## 過渡形式 幻燈片組件允許添加不同的幻燈片切換效果。你需要做的就是將 `animation` 參數添加到data屬性中，并聲明你希望使用的動畫。查看下面的表格了解咱都提供了哪些動畫效果。 | Class | 描述 | | --- | --- | | `fade` | 淡入 | | `scroll` | 滾動進入 | | `scale` | 放大 | | `swipe` | 滑動進入、滑動離開 | 要使用下面這些增強的過渡效果，必須在文檔head中引入 `slideshow-fx.js` 。下面表格不翻譯了，看后面的演示吧。 | Class | 描述 | | --- | --- | | `slice-down` | The items slide down in slices. | | `slice-up` | The items slide up in slices. | | `slice-up-down` | The sliced items slide in alterning directions. | | `fold` | The items are folded in. | | `puzzle` | The items are divided in squares that randomly fade in. | | `boxes` | The items are divided in squares that scale in diagonally from the top left corner. | | `boxes-reverse` | The items are divided in squares that scale in diagonally from the bottom right corner. | | `random-fx` | Different animations are applied randomly. | ### Markup ``` <ul class="uk-slideshow" data-uk-slideshow="{animation: 'random-fx'}">...</ul> ``` * * * ## Ken Burns 效果 炫酷的 Ken Burns 效果也能用在幻燈片里。只需要添加 `{kenburns:true}` 選項到data屬性中就行。這個效果還能用在視頻上。 ### Example  ### Markup ``` <ul class="uk-slideshow" data-uk-slideshow="{kenburns:true}">...</ul> ``` 自定義動畫持續時間: ``` <ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul> ``` * * * ## 全屏幻燈片 創建填滿整個視口的全屏幻燈片，只需要添加一個 `.uk-slideshow-fullscreen` 類。 #### Markup ``` <ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow>...</ul> ``` * * * ## 遮罩 還可以用遮罩來提升幻燈片的效果，為幻燈片列表條目內的 `&lt;div&gt;` 元素添加 `.uk-uk-overlay-panel` 類就行。添加 `.uk-overlay-background` 和 `.uk-overlay-fade` 帶來背景與過渡效果。要實現幻燈片顯示時即觸發遮罩，添加 `.uk-uk-overlay-active` 到列表容器即可。更多選項查看 [遮罩組件](overlay.html). ### Example  ### Markup ``` <ul class="uk-slideshow uk-overlay-active" data-uk-slideshow> <li> <img src="" width="" height="" alt=""> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade">...</div> </li> </ul> ``` * * * ## 視頻 UIkit 允許在幻燈片中放入視頻和iframe。 ### Example <video width="600" height="400" autoplay="" loop="" muted="" controls=""><source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4"> <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test2" type="video/ogg"></video> ### Markup ``` <!-- 帶有視頻的幻燈片 --> <ul class="uk-slideshow"> <li> <video width="" height="" autoplay loop muted controls> <source src="" type=""> </video> </li> </ul> <!-- 帶有Iframe的幻燈片 --> <ul class="uk-slideshow"> <li> <iframe src="" width="" height="" frameborder="0" allowfullscreen></iframe> </li> </ul> ``` * * * ## 內容 基本上可以在幻燈片內插入任何內容，比如文本甚至整個網格。 ### Example  * * * ## JavaScript 選項 | 選項 | 默認值 | 描述 | | --- | --- | --- | | `animation` | 'fade' | 定義幻燈片之間優先呈現的過渡效果 | | `duration` | 500 | 過渡效果持續時間 | | `height` | 'auto' | 幻燈片高度 | | `start` | 0 | 定義顯示的第一張幻燈片 | | `autoplay` | false | 是否自動切換幻燈片 | | `pauseOnHover` | true | 鼠標懸停時是否暫停自動播放 | | `autoplayInterval` | 7000 | 定義幻燈片切換的時間跨度 | | `videoautoplay` | true | 定義是否自動開始播放視頻 | | `videomute` | true | 定義是否靜音播放視頻 | | `kenburns` | false | 定義是否啟用 Ken Burns 效果 | | `kenburnsanimations` | uk-animation-middle-left, uk-animation-top-right, uk-animation-bottom-left, uk-animation-top-center, uk-animation-bottom-right | 動畫方向 | | `slices` | 15 | 定義碎片的數量，如果啟用了 "Slice" 過渡效果的話。 | ### 事件 | 名稱 | 參數 | 描述 | | --- | --- | --- | | `show.uk.slideshow` | event, next slide, current slide | 新的一頁顯示時觸發（動畫完成后） | | `beforeshow.uk.slideshow` | event, next slide, current slide | 新的一頁顯示前觸發（動畫完成前） |