Справка по слайдеру Jquery

Question

хорошо, у меня есть корзина для покупок, поэтому ее сложно настроить.

в любом случае,

вот ссылка на мой код http://jsfiddle.net/WTvQX/

у меняпроблема с тем, чтобы свиток работал правильно ...

он работает по-другому на моем реальном сайте здесь ...

, поэтому мне нужна помощь ... сделать это заново или просто исправить ..

позвольте мне знать

Answer 1

Вам нужно добавить идентификатор «relatedLeft» к левой кнопке, но попробуйте что-то вроде этого ...

Демо: http://jsfiddle.net/wdm954/WTvQX/3/

$('#relatedRight').click(function() {
    $('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
    $('#scool').animate({left: "-=100px"}, 'slow');
});

Вы можете настроить расстояние в пикселяхи скорость по своему вкусу.

---

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

Демо: http://jsfiddle.net/wdm954/WTvQX/5/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
});

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < w) {
        $('#scroll').animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left > -w) {
        $('#scroll').animate({left: "-=100px"}, 'slow');
    }
});

---

РЕДАКТИРОВАТЬ: здесь есть еще одна опция кода.Этот перестанет прокручиваться раньше (обратите внимание, что здесь также есть изменения CSS).

Демо: http://jsfiddle.net/wdm954/WTvQX/7/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
    w += parseFloat($(this).css('paddingRight'));
    w += parseFloat($(this).css('paddingLeft'));
    w += parseFloat($(this).css('marginRight'));
    w += parseFloat($(this).css('marginLeft'));
});

$('#scroll').css('width', w + 'px');

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < 0) {
        $('#scroll').stop().animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    var b = $('#bar').width();
    if (offset.left > b-w) {
        $('#scroll').stop().animate({left: "-=100px"}, 'slow');
    }
});