Slide show add and remove class for change image and button image not work

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; }

Answer 1

        <a class="clickCount active_slider" elementtype="1" data-position="0" categorytitle="">
          <img src="/f15468d9.jpg" class="slideItem">
        </a>
        <a class="clickCount" elementtype="1" categorytitle="" data-position="1">
          <img src="/f15468d9.jpg" class="slideItem">
        </a>
        <a class="clickCount" elementtype="1" categorytitle="" data-position="2">
          <img src="/f15468d9.jpg" class="slideItem">
        </a>

    var position = 0;
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')
        }

        position++;
        if (position == 3){
          position = 0;
        }
      $('.clickCount').each(function(){
          if($(this).attr("data-position") == position){
            $(this).addClass('active_slider');
          }else{
            $(this).removeClass('active_slider');
          }
      }); }, 1000);

I have aded a data-position attribute for the loop