Cześć mam mały problem.
Mam slider przełączany za pomocą kropek odnoszonych do danego slajda. Klasa .slide-single ma domyślnie opacity:0 a klasa active zmienia na 1
<section class="slider">
<div class="slide-container">
<div class="slide-single">
<img alt="img1" src="img1"/>
<div class="slider-right">
<h2>tytuł</h2>
<p>treść</p>
<a href="link">
<div>przycisk</div>
</a>
</div>
</div>
<div class="slide-single">
<img alt="img2" src="img2"/>
<div class="slider-right">
<h2>tytuł</h2>
<p>treść</p>
<a href="link">
<div>przycisk</div>
</a>
</div>
</div>
<div class="slide-single">
<img alt="img3" src="img3"/>
<div class="slider-right">
<h2>tytuł</h2>
<p>treść</p>
<a href="link">
<div>przycisk</div>
</a>
</div>
</div>
<div class="slide-single">
<img alt="img4" src="img4"/>
<div class="slider-right">
<h2>tytuł</h2>
<p>treść</p>
<a href="link">
<div>przycisk</div>
</a>
</div>
</div>
</div>
<div class="slider-controls">
<div class="control-dot"></div>
<div class="control-dot"></div>
<div class="control-dot"></div>
<div class="control-dot"></div>
</div>
</section>
function slider(){
$('.control-dot').first().addClass('active');
$('.slide-single').first().addClass('active');
$('.control-dot').click(function(){
var $this = $(this),
$dotLength = $this.parent().children(),
position = $dotLength.index($this);
$('.control-dot').removeClass('active').eq(position).addClass('active');
$('.slide-single').removeClass('active').eq(position).addClass('active');
});
};
i do tego momentu wszystko działa tak jak chcę. Chciałem jednak dodać jeszcze funkcję która zmieniałaby slajdy np. po 3 sekundach w kółko. Próbowałem z setInterval i pętlą ale nie mogę ruszyć albo wrzuca mi do wszystkich .slide-single klasę active, albo do ostatniego albo tylko do kolejnego i nie idzie dalej. Mógłby ktoś pomóc próbowałem sam i nie mogę z tym dojść do ładu