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

https://jsfiddle.net/R0bert0M3/uc8kntes

<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 >
    <div >
        <div>Yes 1 </div>
        <div>Element 1 </div>
    </div>
    <div >
        <div>Yes 2 </div>
        <div>Element 2 </div>
    </div>
    <div >
        <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 >
    <label  id="img-dot-1" onclick=""></label>
    <label  id="img-dot-2"></label>
    <label  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>

When I click next I want it to match with the dots, and when I click the dots I want my slides to also change. The CSS is in the jsfiddle link.I tried to use OnClick but I couldn't figure it out how to do it .is there any way to make this work.

CodePudding user response：

Find a working example at this fiddle: https://jsfiddle.net/mg0u85sq/

To get the dots to match the current slide shown I have used a class .nav-dot--active to provide the styles. This is set initially on the first dot, and then set inside the selectSlide function.

To enable the dots to select a slide, we can use button elements and aria-label attribute to provide better accessibility support.

You can hook up the click events with something along the lines of:

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