javascript - 如何在 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 。