CODEWITHSUNDEEP
jqueryslider
luv2code
luv2code

Reputation: 1296

Jquery slide up divs

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!

Upvotes: 1

Views: 5083

Answers (4)

gaurang171
gaurang171

Reputation: 9090

Here is full slide show Prev and Next solution with JQuery:

$(document).ready(function() {
$("#next").click(function() {
    if ($('.current').next('.slide').length > 0) {
        $(".current").slideUp();
        $('.current').removeClass('current').next('.slide').addClass('current');
    }

});
$("#prev").click(function() {
    if ($('.current').prev('.slide').length > 0) {
        $('.current').removeClass('current').prev('.slide').addClass('current');
        $(".current").slideDown();
    }

});

});

I have created a bin with the solution on http://codebins.com/codes/home/4ldqpc9

Upvotes: 1

Emre Erkan
Emre Erkan

Reputation: 8482

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

Upvotes: 3

izb
izb

Reputation: 51860

You could mark the divs with marker classes and move the marker with jQuery, e.g.

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

$("#next").click(function(){
    $(".current").slideUp(function() {
        $(this)
            .removeClass('current')
            .next('.slide')
            .addClass('current');
    });
});​

jsfiddle here

Upvotes: 0

derek
derek

Reputation: 4886

try this:

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

js:

$("#next").click(function(){
    $(".current").slideUp();
    $('.current').removeClass('current').next('.slide').addClass('current');

});​

you'll need to add some logic for the previous button, and to determine when you're at the last or first div

Upvotes: 0

Related Questions