Как сделать автопрокрутку слайдера по классу?

Question

[SergeyVladimirovich9393]

Как можно сделать автопрокрутку слайдера? Т.к. слайдер сделан на html+css, то нужно добавить автопрокрутку каждые 4 секунды. Возможно ли с помощью JS повесить функцию на класс next? Слайдер имеет следующий код:

<ul class="slides">
 <input type="radio" name="radio-btn" id="img-1" checked="">
    <li class="slide-container">
    <div class="slide">
 <a href="ссылка"><img src="ссылка на баннер"></a>
    </div>
    <div class="nav">
 <label for="img-7" class="prev">‹</label> <label for="img-2" class="next">›</label>
    </div>
 </li>
</ul>

Answer 1

[Пашенька]

Если совсем по каличному, то можно как-то так:

setInterval(function() {
  document.getElementsByClassName('next')[0].click();
  var slide1 = document.getElementsByClassName('slide-container')[0],
    slidesContainer = document.getElementsByClassName('slides')[0];
  
  slidesContainer.appendChild(slide1);
}, 4000);

Comments

[SergeyVladimirovich9393]

Спасибо огромное! Работает, единственное, понять бы как её зациклить. Потому что переключается на второй слайдер и все.

[Пашенька]

SergeyVladimirovich9393, ну да, не подумал. Обновил ответ. Пробуйте так, если я верно понял вашу разметку.

[SergeyVladimirovich9393]

like-a-boss, к сожалению не работает, на второй слайдер переключается и останавливается. Если нажать на следующий сладер, то потом переключается опять на второй. Скинул полный слайдер, может проще будет.

<ul class="slides">
 <input type="radio" name="radio-btn" id="img-1" checked="">
	<li class="slide-container">
	<div class="slide">
 <a href="ссылка"><img src="изображение"></a>
	</div>
	<div class="nav">
 <label for="img-7" class="prev">‹</label> <label for="img-2" class="next">›</label>
	</div>
 </li>
 <input type="radio" name="radio-btn" id="img-2">
	<li class="slide-container">
	<div class="slide">
 <a href="ссылка"> <img src="изображение"></a>
	</div>
	<div class="nav">
 <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label>
	</div>
 </li>
 <input type="radio" name="radio-btn" id="img-3">
	<li class="slide-container">
	<div class="slide">
 <a href="ссылка"> <img src="изображение"></a>
	</div>
	<div class="nav">
 <label for="img-2" class="prev">‹</label> <label for="img-4" class="next">›</label>
	</div>
 </li>
 <input type="radio" name="radio-btn" id="img-4">
	<li class="slide-container">
	<div class="slide">
 <a href="ссылка"><img src="изображение"></a>
	</div>
	<div class="nav">
 <label for="img-3" class="prev">‹</label> <label for="img-5" class="next">›</label>
	</div>
 </li>
 <input type="radio" name="radio-btn" id="img-5">
	<li class="slide-container">
	<div class="slide">
 <a href="ссылка"><img src="изображение"></a>
	</div>
	<div class="nav">
 <label for="img-4" class="prev">‹</label> <label for="img-6" class="next">›</label>
	</div>
 </li>
 <input type="radio" name="radio-btn" id="img-6">
	<li class="slide-container">
	<div class="slide">
 <a href="ссылка"><img src="изображение"></a>
	</div>
	<div class="nav">
 <label for="img-5" class="prev">‹</label> <label for="img-7" class="next">›</label>
	</div>
 </li>
 <input type="radio" name="radio-btn" id="img-7">
	<li class="slide-container">
	<div class="slide">
 <a href="ссылка"><img src="изображение"></a>
	</div>
	<div class="nav">
 <label for="img-6" class="prev">‹</label> <label for="img-1" class="next">›</label>
	</div>
 </li>
	<li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> <label for="img-6" class="nav-dot" id="img-dot-6"></label> <label for="img-7" class="nav-dot" id="img-dot-7"></label> </li>
</ul>

[Пашенька]

SergeyVladimirovich9393, неверно понял разметку. Обновил.