CODEWITHSUNDEEP
jqueryslidercarousel
Vasileios Tsakalis
Vasileios Tsakalis

Reputation: 1221

Simple jQuery carousel doesnt working well

I created a simple jQuery carousel slider. You can see a demo here

The problem is when i click the right button works like a charm, unfortunately when i click the left button doesnt work as the opposite of right button. Can someone suggest any idea how could i fix it.

My js script:

function moveLeft() {

$("#carousel").animate({marginLeft:'+400px'},1000,function(){
$(this).find(".slide-items:first").after($(this).find(".slide-items:last"));
$(this).css({marginLeft:''});
});

}

function moveRight() {

$("#carousel").animate({marginLeft:'-400px'},1000,function(){
$(this).find(".slide-items:last").after($(this).find(".slide-items:first"));
$(this).css({marginLeft:''});
});


}

$('#left').on('click', function(){
moveLeft();
});

$('#right').on('click', function(){
moveRight();
});

See the demo here

Upvotes: 0

Views: 99

Answers (1)

Maple
Maple

Reputation: 28

$(document).ready(function(){

function moveLeft() {
$("#carousel").find(".slide-items:first").before($("#carousel").find(".slide-items:last"));
$("#carousel").css({marginLeft:'-400px'});
$("#carousel").animate({marginLeft:''},1000,function(){
});

}

function moveRight() {

$("#carousel").animate({marginLeft:'-400px'},1000,function(){
$(this).find(".slide-items:last").after($(this).find(".slide-items:first"));
$(this).css({marginLeft:''});
});


}

$('#left').on('click', function(){
moveLeft();
});

$('#right').on('click', function(){
moveRight();
});


});

check form here

Upvotes: 1

Related Questions