use next() for a slider problems with last div
Hey guys,
I'm new to jQuery. I want to write a small script for my slider for my website. My HTML part looks like:
<img src="images/leftarrow.png" id="leftarrow" alt="leftarrow"/>
<div class="slider">
<div class="active">
<img src="images/1.jpg" />
</div>
<div>
<img src="images/2.jpg" />
</div>
<div>
<img src="images/3.jpg" />
</div>
<div>
<img src="images/4.jpg" />
</div>
<div>
<img src="images/5.jpg" />
</div>
</div>
<img src="images/rightarrow.png" id="rightarrow" alt="rightarrow"/>
I'm testing first the right button because the leftbutton is after implementing the right one the same way. Here is my script:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".slider").children().hide();
$(".active").show();
$("#rightarrow").click(function(event){
var next = $(".active").next();
console.log(next);
var activ = $(".active");
activ.removeClass("active");
next.addClass("active");
activ.hide("fast");
next.show("fast");
})
})
</script>
This works fine until the last div is shown. Then i had to start from the first div element. But i don't know how to write the condition, when the last div is reached. I try something like if($(".active")==null) but thist don't work.
Has someone a good idea how to solve this or must i try another way?
Thanks