how to make simple slider of image in javascript

Question

i am try to make just simple slider of images

• images in img tag not a background image
• all images have display:none only first li have active class active class is display:block
• click on button add active class to only next one li and remove active from pre li
• i try but it active class add with all next li tag on click on button

 var btn_next = document.getElementById('next-btn'); btn_next.onclick = function() { if ($('#main_chagen li').hasClass('acitve') === true) { $('#main_chagen li.acitve').removeClass('acitve') $('#main_chagen li').next().addClass('acitve'); } else { } }

 .main_chagen { width: 100%; float: left; position: relative; } #main_chagen img { width: 100%; height: 26rem; object-fit: cover; } #next-btn, #pre-btn { position: absolute; top: 15rem; padding: 5px 20px; } #next-btn { right: 0; } #pre-btn { left: 0; } #main_chagen li { display: none; } .img_acitve { display: block !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <ul id="main_chagen"> <li class="acitve"> <img src="1.jpg"> </li> <li> <img src="2.jpg"> </li> <li> <img src="3.jpg"> </li> <li> <img src="4.jpg"> </li> <li> <img src="5.jpg"> </li> </ul> <button id="next-btn">next</button> <button id="pre-btn">pre</button> </div>

Answer 1

Here is a working example.

You will need to study it a bit

 $(function() { $('button').on("click", function() { var $cur = $('#main_chagen li.active'); // possibly active var max = $('#main_chagen li').length; // max number of LIs var dir = this.id.indexOf("next") === 0 ? 1:-1; // which button var idx = $cur.length === 0 ? 0 : $cur.index()+dir; // find the index of what we want to show if (idx >= max) idx = 0; // are we at end or beginning if (idx < 0) idx = max-1; $('#main_chagen li').removeClass("active").eq(idx).addClass("active"); }) $("#next-btn").click(); // show the first });

 .main_chagen { width: 100%; float: left; position: relative; } #main_chagen img { width: 100%; height: 26rem; object-fit: cover; } #next-btn, #pre-btn { position: absolute; top: 15rem; padding: 5px 20px; } #next-btn { right: 0; } #pre-btn { left: 0; } #main_chagen li { display: none; } li.active { display: block !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <ul id="main_chagen"> <li> <img src="https://via.placeholder.com/150/0000FF/808080?text=1"> </li> <li> <img src="https://via.placeholder.com/150/0000FF/080808?text=2"> </li> <li> <img src="https://via.placeholder.com/150/FF00FF/808080?text=3"> </li> <li> <img src="https://via.placeholder.com/150/00FFFF/808080?text=4"> </li> <li> <img src="https://via.placeholder.com/150/AABBFF/808080?text=5"> </li> </ul> <button id="next-btn">next</button> <button id="pre-btn">pre</button> </div>