# 滾動條/Slider 創建一個可以作為響應式旋轉木馬滾動條的條目列表。 滾動條能響應式地顯示元素，可以通過鼠標和觸摸手勢滾動。 ## 用法 要使用滾動條組件，需要為包含 `.uk-slider-container` 元素的容器元素添加 `data-uk-slider` 屬性。添加條目的列表，并為此列表添加 `.uk-slider` 類。使用 `.uk-width-*` 和 `.uk-grid-width-*` 類以確定每次顯示多少個元素。 注意 使用此組件需要額外添加 `slider.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `slider.js` 文件，在`js/components`文件夾中。 ### Example  ### Markup ``` <div data-uk-slider> <div class="uk-slider-container"> <ul class="uk-slider uk-grid-width-medium-1-4"> <li>...</li> ... </ul> </div> </div> ``` * * * ## 導航/Navigation 滾動條本身可以使用鼠標點擊和拖拽或者觸屏設備中滑動進行滾動。添加一個可以點擊的滑動導航也是個好主意。滑動導航添加的箭頭按鈕會在鼠標懸停在滑動條上時顯示出來。 ### Example ``` <div class="uk-slidenav-position" data-uk-slider> <div class="uk-slider-container"> <ul class="uk-slider uk-grid-width-medium-1-4"> <li>...</li> ... </ul> </div> <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a> <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a> </div> ``` * * * ## 居中模式/Center Mode 默認情況下，滾動條的元素總是對齊滾動條容易的左邊緣。如果你想讓元素居中，設置 `center` 屬性的值為 `true` 即可。 注意 被居中的列表元素通常會被添加 `.uk-active` 類。如果你想高亮顯示居中的元素，添加該類名即可。 ### Example  ### Markup ``` <div data-uk-slider="{center:true}"> <div class="uk-slider-container"> <ul class="uk-slider uk-grid-width-medium-1-4"> <li>...</li> ... </ul> </div> </div> ``` * * * ## 禁用無限滾動 默認情況下，滾動條循環顯示所有條目。要禁用這種行為，設置 `infinite` 參數為 `false` 即可。在啟用或禁用居中模式中都同樣有效。 ### Example  ### Markup ``` <div data-uk-slider="{infinite: false}"> <div class="uk-slider-container"> <ul class="uk-slider uk-grid-width-medium-1-4"> <li>...</li> ... </ul> </div> </div> ``` * * * ## 條目排水溝/Item gutter 如果你想為滾動條中的元素添加間距，添加 `.uk-grid` 類到滾動條容器即可。元素將會根據網格排水溝尺寸被分隔開。 注意 你可以使用網格的修飾類 `uk-grid-medium` 和 `uk-grid-small` 來調整排水溝的尺寸。 ### Example  * * * ## 條目寬度/Item width 如果要設置滾動條中各元素的寬度，使用 UIkit 網格中的寬度類即可。既可以在滾動條容器上使用 `uk-grid-width-*` 類名，也可以為列表中每個條目單獨使用 `uk-width-*` 類名。 ### Example: 為條目單獨設置寬度  ### Markup ``` <div data-uk-slider> <div class="uk-slider-container"> <ul class="uk-slider"> <li class="uk-width-1-3">...</li> <li class="uk-width-1-5">...</li> <li class="uk-width-2-5">...</li> ... </ul> </div> </div> ``` * * * ## 響應式行為 為了適應不同的視口，你可以使用網格的響應式類名。在下面的例子中，滾動條會在大視口中顯示4個條目，在中視口中顯示3個，在小視口中顯示一個。 ### Example: 響應式寬度  ### Markup ``` <div data-uk-slider> <div class="uk-slider-container"> <ul class="uk-slider uk-grid-width-medium-1-3 uk-grid-width-large-1-4"> <li>...</li> ... </ul> </div> </div> ``` * * * ## 全屏模式 滾動條包含全屏模式，在全屏模式下，滾動條將延伸至100%的視口高度。 ### Markup ``` <div data-uk-slider> <div class="uk-slider-container"> <ul class="uk-slider uk-slider-fullscreen"> <li>...</li> ... </ul> </div> </div> ``` * * * ## JavaScript 選項 | 選項 | 可用值 | 默認值 | 描述 | | --- | --- | --- | --- | | `center` | boolean | false | 條目居中模式 | | `threshold` | boolean | true | 移動鼠標觸發元素拖動的閾值，以像素為單位。 | | `infinite` | boolean | true | 無限滾動 | | `activecls` | string | uk-active | 在居中模式中，添加到被選中條目上的類名。 | | `autoplay` | false | boolean | 是否讓滾動條的內容條目自動切換 | | `pauseOnHover` | boolean | true | 鼠標懸停在滾動條上時暫停播放 | | `autoplayInterval` | integer | 7000 | 切換滾動條內容條目的時間間隔 | ### 手動初始化元素 ``` var slider = UIkit.slider(element, { /* options */ }); ``` ### 事件/Events | 事件名 | Parameter | 描述 | | --- | --- | --- | | `focus.uikit.slider` | event, index, item | 條目獲得焦點時觸發 |