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/
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/
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);
}
});
});
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);
}
});
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()
}
}
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.
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).
– Rafael Alexandre
@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.
– Rafael Barbosa