javascript - 如何将点导航放置在UIkit滑块中

如何为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>

但是只有点显示出来了吗？

最佳答案

如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，以获取有关如何通过工作示例实现此目的的详细说明。