为我的滑块实现导航点以匹配我的 div 元素

Question

<html>
  <link href="./style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
<div class="divs">
    <div class="cls1">
        <div>Yes 1 </div>
        <div>Element 1 </div>
    </div>
    <div class="cls2">
        <div>Yes 2 </div>
        <div>Element 2 </div>
    </div>
    <div class="cls3">
        <div>Yes 3 </div>
        <div>Element 3 </div>
    </div>

</div>
<a id="next">next</a>
<a id="prev">prev</a>
<br>
<br>
<br>
<br>
<li class="nav-dots">
    <label class="nav-dot" id="img-dot-1" onclick=""></label>
    <label class="nav-dot" id="img-dot-2"></label>
    <label class="nav-dot" id="img-dot-3"></label>
  </li>

<script>
$(document).ready(function(){
    $(".divs>div").each(function(e) {
        if (e != 0)
          $(this).hide();
    });
    
    $("#next").click(function(){
      const visibleDiv = $(".divs>div:visible");
      const nextDiv = visibleDiv.next();
      if(nextDiv.length > 0) {
        visibleDiv.hide();
        nextDiv.show();
      }

    });

    $("#prev").click(function(){
      const visibleDiv = $(".divs>div:visible");
      const prevDiv = visibleDiv.prev();
      if(prevDiv.length > 0) {
        visibleDiv.hide();
        prevDiv.show();
      }
    });
});

</script>
</html>

当我单击下一步时，我希望它与点匹配，而当我单击这些点时，我希望我的幻灯片也发生变化。 CSS 在 jsfiddle 中 link.I 尝试使用 OnClick 但我不知道该怎么做。有什么方法可以使它工作。

Answer 1

在此 fiddle 找到一个工作示例：https://jsfiddle.net/mg0u85sq/

为了使点与当前显示的幻灯片相匹配，我使用了 class .nav-dot--active 来提供样式。这最初设置在第一个点上，然后在 selectSlide 函数中设置。

要使圆点成为 select 幻灯片，我们可以使用 button 元素和 aria-label 属性来提供更好的可访问性支持。

您可以将点击事件与以下内容联系起来：

$(".nav-dot").each((index) => {
    $(this).click(() => {
         selectSlide(index);
    });
});

为我的滑块实现导航点以匹配我的 div 元素

Implement nav dots to my slider to match with my div element

html

javascript

css

jquery