Javascript: cannot find the bug on a slideshow

Question

I have two sliders on a website. the first slide works ok, but the second slide is bugged on the "slide right" button. I have checked the code even with a visual diff of the code and there is no difference (apart from the component names) between the two slides.

I have made a JSfiddle of the code here: http://jsfiddle.net/sfcRJ/ EDIT: jquery was missing, this works: http://jsfiddle.net/sfcRJ/1/

This is the JS of the first slide:

jQuery(document).ready(function ($) {

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({
    width: slideWidth,
    height: slideHeight
});

$('#slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
});

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: +slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: -slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});

});

This is the JS of the second slide:

jQuery(document).ready(function ($) {

var slideCount = $('#profes ul li').length;
var slideWidth = $('#profes ul li').width();
var slideHeight = $('#profes ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#profes').css({
    width: slideWidth,
    height: slideHeight
});

$('#profes ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
});

$('#profes ul li:last-child').prependTo('#profes ul');

function moveLeft() {
    $('#profes ul').animate({
        left: +slideWidth
    }, 200, function () {
        $('#profes ul li:last-child').prependTo('#profes ul');
        $('#profes ul').css('left', '');
    });
};

function moveRight() {
    $('#profes ul').animate({
        left: -slideWidth
    }, 200, function () {
        $('#profes ul li:first-child').appendTo('#profes ul');
        $('#profes ul').css('left', '');
    });
};

$('a.ctrl_prev').click(function () {
    moveLeft();
});

$('a.ctrl_next').click(function () {
    moveRight();
});

});

Unfortunately The fiddle does not work at all and I have no clue why. I'm quite new to js and I have a very hard time debugging it.

Can someone have a look at the code and help me find what's wrong?

EDIT: It seems that the slideshow works with three slides but not with two. Looking at the code, I cannot find the reason of this behaviour, expecuially since the slideshow on the right works with the previous button but not with the right button. Why this is happening?

Answer 1

you should include jQuery library. Try this from the dropdown available on the left in your JSfiddle. It is working fine.

you can debug and find errors using developer console available in browsers.

chrome browser has debugger available in it, please refere Chrome Javascript debugger

you can refer to various debugging techniques at Advanced JavaScript Debugging Techniques

Answer 2

There's no difference between the two sliders except that you have three li objects with images on the left one, but only two on the right one.

It's a bit of a hack getting it to work with only two images since you have a fixed width on your slider. You widen the slider by another image, clone the first child, append it and then remove it when the animation is done.

function moveRight1() {
    if (slideCount1==2) {
        $('#profes ul').css('width', sliderUlWidth1+slideWidth1);
        $('#profes ul li:first-child').clone().appendTo('#profes ul');
    }
    $('#profes ul').animate({
        left: -slideWidth1
    }, 200, function () {
        if (slideCount1==2) $('#profes ul li:last-child').remove();
        $('#profes ul li:first-child').appendTo('#profes ul');
        $('#profes ul').css('left', '');
    });
};

Here's a demo