Rick Hayhurst February 2016

jQuery image slider using an increment/decrement

Im trying to create a slider that uses an increment/decrement to move and then hide or show the buttons depending on the max number of images in the row. It uses a div within a div, with an overflow of hidden that should move until the max number of images is hit, this is when the arrow should be hidden so the person cannot just keep going into the white space created by the overflow. However, the hide/shows do not work and the person can just keep incrementing because the arrow is still visible even after the max number of images has been reached.

How do I get the left and right arrows to hide when they hit the respective numbers?

Edit: i know the .css is messed-up, i just want to get the arrows to hide/ show first, thanks

var pressCounter = 0;
    var maxImgCounter = $('.carousel-image').length; // gain the max amount of images
    var maxSlide = maxImgCounter - 4;// - the amount of images visible on the screen so it does notshow white space

    if ( pressCounter < maxSlide){
        $('#right').show();
    }else{
        $('#right').hide();
    }
    if (pressCounter > 0){
        $('#left').show();
    }else{
        $('#left').hide();
    }

    /* Left arrow */
    $('#left').click(function(){
        $( '.slide' ).css({
            "position": "relative",
            "right": -280 * pressCounter
        });
        pressCounter--;
        return pressCounter; 
    });
    /* Right arrow */
     $('#right').click(function(){
         $( '.slide' ).css({
            "position": "relative",
            "right": 280 * pressCounter
         }); 
         pressCounter++;
         return pressCounter;
         });

Answers


Korgrue February 2016

   if ( pressCounter < maxSlide){
        $('#right').show();
    }else{
        $('#right').hide();
    }
    if (pressCounter > 0){
        $('#left').show();
    }else{
        $('#left').hide();
    }

Consider what happens when the value is less than maxslide and presscounter is greater than zero. Pretty much, this condition will always be true the way you have it written so both if statements are firing each time - one after the other. The result is that your left and right arrows will always be displayed - allowing users to keep clicking past the last slide.

Post Status

Asked in February 2016
Viewed 1,334 times
Voted 14
Answered 1 times

Search




Leave an answer