Visit this JSFiddle link for the code
<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>
Clicking the "Next" button should correspond to the dots, and clicking the dots should change the slides accordingly. If you have a solution using OnClick, please share as I couldn't figure it out how to do it.