Javascript: не удается найти ошибку в слайд-шоу

Question

У меня есть два слайдера на сайте. первый слайд работает нормально, но второй слайд прослушивается при нажатии кнопки "вправо". Я проверил код даже с визуальной разницей кода, и нет никакой разницы (кроме названий компонентов) между двумя слайдами.

Я сделал JSfiddle кода здесь: http://jsfiddle.net/sfcRJ/ РЕДАКТИРОВАТЬ: jquery отсутствует, это работает: http://jsfiddle.net/sfcRJ/1/

Это JS первого слайда:

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();
});

});

Это JS второго слайда:

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();
});

});

К сожалению, скрипка не работает вообще, и я понятия не имею, почему. Я новичок в js, и мне очень тяжело отлаживать его.

Может кто-нибудь взглянуть на код и помочь мне найти, что не так?

РЕДАКТИРОВАТЬ: Кажется, что слайд-шоу работает с тремя слайдами, но не с двумя. Глядя на код, я не могу найти причину такого поведения, особенно потому, что слайд-шоу справа работает с предыдущей кнопкой, но не с правой кнопкой. Почему это происходит?

Answer 1

Там нет никакой разницы между двумя ползунками, за исключением того, что у вас есть три li объекты с изображениями слева, но только два справа.

Это немного хакерство - заставить работать только с двумя изображениями, так как у вас есть фиксированная ширина на слайдере. Вы расширяете ползунок другим изображением, клонируете первого потомка, добавляете его, а затем удаляете его, когда анимация завершена.

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', '');
    });
};

Вот демо

Answer 2

Вы должны включить библиотеку jQuery. Попробуйте это из раскрывающегося списка слева в вашем JSfiddle. Работает нормально.

Вы можете отлаживать и находить ошибки, используя консоль разработчика, доступную в браузерах.

Браузер Chrome имеет отладчик, пожалуйста, обратитесь к отладчику Chrome Javascript

Вы можете обратиться к различным методам отладки в Advanced JavaScript Debugging Techniques