Slide show add and remove class for change image and button

Question

I want make slide show. its my code: java script =>

setInterval(function () {
  var activeLi = document.querySelector('li.current');
 activeLi.classList.remove('current');
 if (activeLi.nextElementSibling ) {
  activeLi.nextElementSibling .classList.add('current');
 } else {
  activeLi.parentElement.firstElementChild.classList.add('current')
 }
 var activeIMG = document.querySelector('.active_slider');
 activeIMG.classList.remove('active_slider');
 if (activeIMG.nextElementSibling ) {
  activeIMG.nextElementSibling .classList.add('active_slider');
 } else {
  activeIMG.parentElement.firstElementChild.classList.add('active_slider')
 }
}, 5000);

.active_slider{
  display: inline;
 }
 .current{
  color: red;
 }

<div id="slider" class="dk-box mrg-bottom">
    <div id="dk-slider-div" class="slides center">
        <a class="clickCount" elementtype="1" categorytitle="">
            <img src="/f15468d9.jpg" class="slideItem active_slider">
        </a>
        <a class="clickCount" elementtype="1" categorytitle="">
            <img src="/f15468d9.jpg" class="slideItem">
        </a>
        <a class="clickCount" elementtype="1" categorytitle="">
            <img src="/f15468d9.jpg" class="slideItem">
        </a>
        <footer>
            <ul class="tabs">
                <li class="tabItem current">
                    <a>
                        Slide 1
                    </a>
                </li>
                <li class="tabItem">
                    <a>
                        Slide 2
                    </a>
                </li>
                <li class="tabItem">
                    <a>
                        Slide 3
                    </a>
                </li>
            </ul>
        </footer>
    </div>
</div>

buttons was active and changed after 5 sec but image doesn't change active_slider = active slider current = active button how can i make auto change for slider i want add class for active and remove class for hide if cant with class i can active with style { display: inline; }

Possible duplicate of [How do I add a class to a given element?](https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) — Filnor, Oct 11 '17 at 10:28
Welcome to StackOverflow! Have you tried anything so far? StackOverflow isn't a free code-writing service, and expects you to [try to solve your own problem first](http://meta.stackoverflow.com/questions/261592). Please update your question to show what you have already tried, showing the specific problem you are facing in a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve). For further information, please see [how to ask a good question](http://stackoverflow.com/help/how-to-ask), and take the [tour of the site](http://stackoverflow.com/tour) — Jaromanda X, Oct 11 '17 at 10:29
google #1: javascript how to add class. google #2: javascript timeout — dfsq, Oct 11 '17 at 10:32

score 1 · Answer 1 · answered Oct 11 '17 at 10:44

Try something like this, it will run every 3 second and set the class active to the next element.

setInterval(function(){ 
  var slider = $(".slider");
  var active = slider.find(".active");
  var sliderCount = slider.find("li").length;
  var index = active.index();
  
  active.removeClass("active");
  
  if (index < sliderCount - 1){
    active.next().addClass("active")
  } else {
    slider.find("li:first").addClass("active")
  }
  
}, 3000);

.active{
  color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
    <li class="slide1">
        <img src"image.png" alt="1">
    </li>
    <li class="slide2 active">
        <img src"image.png" alt="2">
    </li>
    <li class="slide3">
        <img src"image.png" alt="3">
    </li>
</div>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Your html is invalid, there is = missing after class, should be class="slide1 active". To invoke function after some time you can use setInterval() adn to modify classes you can modify classList property:

var x = 1000;

setInterval(function () {
  var activeLi = document.querySelector('li.active');
  activeLi.classList.remove('active');
  if (activeLi.nextElementSibling ) {
    activeLi.nextElementSibling .classList.add('active');
  } else {
    activeLi.parentElement.firstElementChild.classList.add('active')
  }
}, x);

.active {
  color:red
}

<div class="slider">
    <li class="slide1 active">
        <img src"image.png">
    </li>
    <li class="slide2">
        <img src"image.png">
    </li>
    <li class="slide3">
        <img src"image.png">
    </li>
</div>

On every interval it removes class active from element and checks if element has sibling element (by checking nextElementSibling existence). Depending on it, active class is attached to either sibling or first element (parentElement.firstElementChild).

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 11 '17 at 10:43

Andrzej Smyk

1,550
9
18

how automatic for all slides? slide1 and slide2 and slide3 and again – amir ntm Oct 11 '17 at 10:45
if my code doesn't have
tag how find it in document.querySelector ? for example : document.querySelector('img.active');

amir ntm

Oct 11 '17 at 11:53

document.querySelector('img.active') should work as well as document.querySelector('.active') – Andrzej Smyk Oct 11 '17 at 11:55

i changed my text and code and ... can you help me? – amir ntm Oct 11 '17 at 12:30

Slide show add and remove class for change image and button

2 Answers2