UIkit 슬라이더에서 도트 탐색을 수행하는 방법

Question

uikit의 슬라이더 구성 요소에 도트 탐색 기능을 어떻게 추가합니까? 나는 시도했다,

<div data-uk-slider> 
    <div class="uk-slider-container"> 
    <ul class="uk-slider uk-dotnav uk-grid-width-medium-1-4"> 
     <li><a href=""><img src="image1.png"></a></li> 
     <li><a href=""><img src="image2.png"></a></li> 
     <li><a href=""><img src="image3.png"></a></li> 
     <li><a href=""><img src="image4.png"></a></li> 
     <li><a href=""><img src="image5.png"></a></li> 
    </ul> 
    </div> 
</div> 

그러나 도트 만 표시됩니까?

Answer 1

언급 한대로 cssBlaster21895 UIkit 설명서는 슬라이드 키트 구성 요소에 직접 dotnav 통합 만 제공하지만 dotnav 설명서는 다른 모든 UIkit 구성 요소에 통합 될 수 있음을 암시합니다.

은 기본적으로 당신은 슬라이더 내부의 일반적인 dotnav의 HTML을 추가 할 수 있습니다

<ul class="uk-slider-nav uk-dotnav"> 
    ... 
</ul> 

그런 다음 dotnav 구성 요소 JS & CSS를 포함한다.

https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/dotnav.min.css https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/dotnav.min.js

참조

내 Fiddle이이 작업을 예를 달성 할 수있는 방법에 대한 자세한 설명합니다.