CODEWITHSUNDEEP
javascriptjquery
MassDefect_
MassDefect_

Reputation: 1990

How to modify DIY slider?

I'm pretty new at jquery and I found this DIY slider tutorial online and what I'm trying to do is modify it so when the first image is loaded the back button will hide, and when the last image is loaded the forward button will hide, and anything in between will show both buttons(forward and back). How can I go about doing this?

Source: http://jsfiddle.net/id_squared/bj4yZ/453/

$(document).ready(function() {
$(".slider").diyslider({
    width: "820px", // width of the slider
    height: "160px", // height of the slider
    display: 1, // number of slides you want it to display at once
    loop: false // disable looping on slides
}); // this is all you need!

// use buttons to change slide
$("#go-left").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "forth");
});

});

Upvotes: 0

Views: 501

Answers (3)

James
James

Reputation: 3805

Just add this:

$(".slider").bind("moved.diyslider", function(event, slide, slideNumber, actuallyMoved){
    if ($("div.slider").find(".active").is(":first-child")) {
        $("#go-left").hide();
        $("#go-right").show();
    }else if ($("div.slider").find(".active").is(":last-child")) {
        $("#go-right").hide();
        $("#go-left").show();
    }else{
        $("#go-left").show();
        $("#go-right").show();
    }
});

This will work no matter how many slides you have.

Upvotes: 3

suff trek
suff trek

Reputation: 39777

You need to handle "moved.diyslider" event - it gives you current slide number. Knowing slide number you can show and hide buttons as desired:

$('#go-left').hide()

$(".slider").diyslider({
    width: "400px", // width of the slider
    height: "200px", // height of the slider
    display: 1, // number of slides you want it to display at once
    loop: false // disable looping on slides
}).bind("moved.diyslider", function(event, slide, slideNumber){

    if (slideNumber > 1) 
        $('#go-left').show();    
    else
        $('#go-left').hide();    

    if (slideNumber < 5) 
        $('#go-right').show();    
    else
        $('#go-right').hide();    

})

DEMO: http://jsfiddle.net/bj4yZ/456/

Upvotes: 2

Barbara Laird
Barbara Laird

Reputation: 12717

You'll need to add a slide counter and hide and show the buttons when you are at the edges.

http://jsfiddle.net/bj4yZ/455/

var currentSlide = 0
    maxSlides = $('.slider div div').length - 1;

$(".slider").diyslider({
    width: "400px", // width of the slider
    height: "200px", // height of the slider
    display: 1, // number of slides you want it to display at once
    loop: false // disable looping on slides
}); // this is all you need!

$('#go-left').hide();
// use buttons to change slide
$("#go-left").bind("click", function(event, slide, slideNumber, actuallyMoved){
    currentSlide--;
    checkView();
    // Go to the previous slide
    $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(event, slide, slideNumber, actuallyMoved){
    currentSlide++;
    checkView();
   // Go to the previous slide
    $(".slider").diyslider("move", "forth");
});

var checkView = function() {
    if (currentSlide == 0) $('#go-left').hide();
    else $('#go-left').show();

    if (currentSlide == maxSlides) $('#go-right').hide();
    else $('#go-right').show();
}

Upvotes: 2

Related Questions