CODEWITHSUNDEEP
javascriptjquery
Aamir Shahzad
Aamir Shahzad

Reputation: 6834

jquery slider not working for less than 3 images - i.e. one or two

i have following code i am facing issue when images are less than three it shows up blank slide its not working perfectly as a rotators i want it to work like infinite rotator both ways clockwise as well as anticlockwise.

jsfiddle

CSS

#slider-wrapper {
    margin: 5% 10%;
    max-height: 500px;
    max-width: 300px;
    position:relative;
}
#slider {
    display: block;
    position: relative;
    z-index: 99999;
    max-width: 710px;
    width: 100%;
    margin: 0 auto;
    background: red;
}
#button-previous {
    height: 60px;
    left: -40px;
    margin-top: 40%;
    position: absolute;
    width: 40px;
}
#button-next {
    float: right;
    margin-top: 40%;
    position: relative;
}
.sp {
    position: absolute;
}
#slider .sp {
    max-width: 710px;
    width: 100%;
    max-height: 500px;
    height: 40px;
}

JavaScript

$(document).ready(function(e) {

    $("#slider > div:gt(0)").hide();
$("#button-next").click(function () {
    $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .appendTo("#slider");
});

$("#slider > div:gt(0)").hide();
$("#button-previous").click(function () {
    $("#slider > div:last")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .appendTo("#slider");
});
});

HTML 

<div id="slider-wrapper">
        <div id="slider">
            <div class="sp"><img src="Images/thumb/1.jpg" width="234" height="240"></div>
            <div class="sp"><img src="Images/thumb/2.jpg" width="234" height="240"></div>
            <div class="sp"><img src="Images/thumb/3.jpg" width="234" height="240"></div>
        </div>
            <div id="button-previous">prev</div>
            <div id="button-next">next</div>
        </div>

Upvotes: 0

Views: 261

Answers (3)

Rachel
Rachel

Reputation: 1370

You may also try this:

$(document).ready(function(e) {
    $("#slider > div:gt(0)").hide();
        $("#button-next").click(function () {
            $("#slider > div:first")
                .fadeOut(1000)
                .next()
                .fadeIn(1000);
            $("#slider > div:first").appendTo("#slider");
        });

    $("#button-previous").click(function () {
        $("#slider > div:first")
            .fadeOut(1000);
        $("#slider > div:last")
            .fadeIn(1000);
        $("#slider > div:first").before($("#slider > div:last"));
    });
});

Upvotes: 0

DevlshOne
DevlshOne

Reputation: 8457

jsFiddle Demo

when images are less than two

Which means you have only one image? To make it work with a single image and make it an infinite loop, use this code:

var sliderDivs = $('#slider > div.sp');
var sliderCount = sliderDivs.length;
var currSlide = 0;
$("#slider > div.sp:eq(0)").fadeIn(1000);
$("#button-next").click(function () {
    $("#slider > div.sp:eq(" + currSlide + ")").fadeOut(1000);
    currSlide++;
    if (currSlide > sliderCount - 1) currSlide = 0;
    $("#slider > div.sp:eq(" + currSlide + ")").fadeIn(1000);
});
$("#button-previous").click(function () {
    $("#slider > div.sp:eq(" + currSlide + ")").fadeOut(1000);
    currSlide--;
    if (currSlide < 0) currSlide = sliderCount - 1;
    $("#slider > div.sp:eq(" + currSlide + ")").fadeIn(1000);
});

Upvotes: 1

Jereme
Jereme

Reputation: 651

You will have to remove the next() selector(since you are already using append) and use prependTo for the previous button.

  $("#button-next").click(function () {
        $("#slider > div.sp:first")
            .fadeOut(1000)
            .fadeIn(1000)
            .appendTo("#slider");

        $("#slider > div.sp:first")
        .fadeOut(1000)
        .appendTo("#slider");
    });

    $("#slider > div:gt(0)").hide();
    $("#button-previous").click(function () {
         $("#slider > div.sp").fadeOut(1000);
        $("#slider > div.sp:last")
           .prependTo("#slider") 
            .fadeIn(1000);

    });

Here is the working fiddle by the way

http://jsfiddle.net/jeremejazz/KZgaq/

Upvotes: 1

Related Questions