Add a "pass" limit to a Carousel slider

Asked

Viewed 95 times

2

I am working on a simple slider Carousel and need that when there is no previous or next item it is not possible to pass to a non-existent element as is happening, http://jsfiddle.net/qd5d8x1h/

javascript jquery

4 answers

1

HTML

<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button>
<div id="wrapper">
    <div id="slider">
        <div class="sliderItem" id="today">Today's Actions</div>
        <div class="sliderItem" id="today">Today's Actions</div>
        <div class="sliderItem" id="today">Today's Actions</div>
    </div>
</div>

jQuery

$(document).ready(function () {
    var sliderWidth = 300;
    var slider = $('#slider');
    var sliderCount = $('div', slider).length;
    var numItems = $('.sliderItem').length;

    if (numItems <= 1) {
        $('.date-nav-prev').hide();
        $('.date-nav-next').hide();
    }

    var numItems = $('.sliderItem').length;
    slider.width(sliderCount * sliderWidth);
    var counter = 0;

    $('.date-nav-prev').click(function () {
        if (counter > 0) {
            counter--;
            $('#slider').animate({ left: '+=' + sliderWidth }, 500);
        }
    });

    $('.date-nav-next').click(function () {
        counter++;
        if (counter < numItems) {
            $('#slider').animate({ left: '-=' + sliderWidth }, 500);
        }
        else {
            counter = 0;
            $('#slider').animate({ left: '+=' + sliderWidth * sliderCount - 150 }, 500);
        }
    });
});

Jsfiddle

  • Rafael Barbosa, in fact what is happening is that by clicking on Next until the last element is "passing" to a blank block, which contains no element. What I need is for the Next button to be disabled when arriving at the last element of the Carousel, the same for the Prev button (For the first element).

  • @Raphaelcastro working now. When it arrives at the last element it goes back to the first. If it is less than or equal to 1 it does not appear the control. If he’s on first, he won’t go back to white.

0

Full update:

Just control the current slide, and do not allow to go before 1 or after the number of slides:

var sliderWidth = 300;
var slide = 1;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);

$('.date-nav-prev').click(function () {
    if (slide > 1) {
        slide--;
        slider.animate({ left: '+=' + sliderWidth }, 500);
    }
});

$('.date-nav-next').click(function () {
    if (slide < sliderCount) {
        slide++;
        slider.animate({ left: '-=' + sliderWidth }, 500);
    }
});

Jsfiddle

0


I believe it has a more optimized shape, but works perfectly.

var sliderWidth = 300;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
var cont =1;

$(document).ready(function() {
var numItems = $('.sliderItem').length;
   $('.date-nav-prev').hide();
});

slider.width(sliderCount * sliderWidth);



$('.date-nav-prev').click(function () { 
    $('#slider').animate({left: '+='+sliderWidth}, 500);
    cont--;
    hidePrev();
    hideNext();
});

$('.date-nav-next').click(function () {
    $('#slider').animate({left: '-='+sliderWidth}, 500);
    cont++;
    hidePrev();
    hideNext();
});


function hideNext(){

if(cont==sliderCount){
        $('.date-nav-next').hide();
    }else{
        $('.date-nav-next').show();
    }
}



function hidePrev(){

    if(cont>1){
        $('.date-nav-prev').show()
    }else{
        $('.date-nav-prev').hide()
    }
}

Jsfiddle

0

See if there are sibling elements of the slider element, or count the number of standard elements of the slider that exist, in case if it is 1 or smaller, Voce does not show the controls.

For this you can use several methods, two of them use the references below, which have example of use in each pointer.

Refs:

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.