Question

I need some help, I am trying to create a very simple jquery slider.. I want four divs to slide up when I click on a button. But I can not wrap my head around how to do this. Here is what I have in jsfiddle.net: http://jsfiddle.net/liveandream/LFAMW/

And here is my code:

<div id="slider">
<div class="slide1" style="background: red"></div>
<div class="slide2" style="background: green"></div>
<div class="slide3" style="background: black"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>​

JQUERY:

$("#next").click(function(){
    $(".slide1").slideUp();
});​

But I need them to automatically slide up to the next div on the next and previous click. Please any help would be greatly appreciated!

Answer 1

Are you trying something like this?

HTML:

<div id="slider">
<div class="slide" style="background: red"></div>
<div class="slide" style="background: green;display: none;"></div>
<div class="slide" style="background: black; display: none;"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

Javascript:

$("#next").click(function(){
    var $next = $(".slide:visible").slideUp().next('.slide');
    if($next.size() < 1) {
        $next = $(".slide:first");
    }
    $next.slideDown();
});

$("#prev").click(function(){
    var $prev = $(".slide:visible").slideUp().prev('.slide');
    if($prev.size() < 1) {
        $prev = $(".slide:last");
    }
    $prev.slideDown();
});

CSS:

.slide {
width: 300px;
height: 300px;

}
#slider{
width: 300px;
height: 300px;
}