Повторное использования скрипта.

[Kobe_kobe]

Здравствуйте. Возникла проблема. Имеется два одинаковых слайдера(карусели). При нажатие на кнопку для прокрутки первой карусели, начинают прокручиваться оба. Понятно, что можно создать еще один скрипт для второй карусели и поменять названия классам.
Возможно ли использовать только один скрипт? Чтобы он определял, что я кликаю на кнопку, к примеру первой карусели и она только прокручивалась.

var carWidth=240;
    var visibleSlide = 3;
    var blockMargin = 10;

    $(function(){
    $('.blocks').width($('.blocks').children().size()*carWidth);


        $('#next_car').click(function(){
            nextCar();
        });
        $('#prev_car').click(function(){
            prevCar();
        });
    });


    function nextCar(){
        var currentSlide=parseInt($('.blocks').data('current'));
        currentSlide++;
        if(currentSlide>=visibleSlide)
        {
            $('.blocks').css('left',-(currentSlide-2)*carWidth+blockMargin);
            $('.blocks').append($('.blocks').children().first().clone());
            $('.blocks').children().first().remove();
            currentSlide--;
        }
        $('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
    }

    function prevCar(){
        var currentSlide=parseInt($('.blocks').data('current'));
        currentSlide--;
        if(currentSlide<0)
        {
            $('.blocks').css('left',-(currentSlide+2)*carWidth-blockMargin);
            $('.blocks').prepend($('.blocks').children().last().clone());
            $('.blocks').children().last().remove();
            currentSlide++;
        }
        $('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
    }

[danik.js]

#next_car

Для начала id заменить на классы.
Далее вместо $('.bloks') используй $el = $('#slider1') в начале скрипта и далее $el.find('.blocks')....

Далее оберни код в функцию или констуктор и передавай #slider1 аргументом. Вызывай дважды:

makeSlider('#slider1');
makeSlider('#slider2');

Такой вот примитивный вариант.

[Kobe_kobe]

похоже я что-то не понял, у меня сейчас вообще перестал реагировать.

var carWidth=240;
    var visibleSlide = 3;
    var blockMargin = 10;
    function makeSlider (a) {
        $el = a;
        $(function(){
        $el.find('.blocks').width($('.blocks').children().size()*carWidth);


            $('.next_car').click(function(){
                nextCar();
            });
            $('.prev_car').click(function(){
                prevCar();
            });
        });


        function nextCar(){
            var currentSlide=parseInt($el.find('.blocks').data('current'));
            currentSlide++;
            if(currentSlide>=visibleSlide)
            {
                $el.find('.blocks').css('left',-(currentSlide-2)*carWidth+blockMargin);
                $el.find('.blocks').append(el.find$('.blocks').children().first().clone());
                $el.find('.blocks').children().first().remove();
                currentSlide--;
            }
            $el.find('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
        }

        function prevCar(){
            var currentSlide=parseInt($el.find('.blocks').data('current'));
            currentSlide--;
            if(currentSlide<0)
            {
                $el.find('.blocks').css('left',-(currentSlide+2)*carWidth-blockMargin);
                $el.find('.blocks').prepend($el.find('.blocks').children().last().clone());
                $el.find('.blocks').children().last().remove();
                currentSlide++;
            }
            $el.find('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
        }
    }
    makeSlider('#carousel1');
    makeSlider('#carousel2');

[danik.js]

$el = a;

a - у тебя строка, например '#carousel'. Откуда у строки метод find()? Я разве так писал? Где перед объявлением переменной ключевое слово var?

el.find$('.blocks')

Это че такое? Косяков тьма.

[Kobe_kobe]

Спасибо. Функция заработала, но работает некорректно. При нажатие на кнопку первой карусели два раза перелистывает вторую(2 элемента перелистывает) . При нажатие на кнопку второй карусели, при первом клике также перелистывает вторую карусель дважды(2 элемента). Не могли бы вы подсказать, что не так с кодом?

var carWidth=240;
   var visibleSlide = 3;
   var blockMargin = 10;

 function makeSlider (a) {
        var el;
        $el = $(a);
        $(function(){
        $el.find('.blocks').width($el.find('.blocks').children().size()*carWidth);


            $('.next_car').click(function(){
                nextCar();
            });
            $('.prev_car').click(function(){
                prevCar();
            });
        });


        function nextCar(){
            var currentSlide=parseInt($el.find('.blocks').data('current'));
            currentSlide++;
            if(currentSlide>=visibleSlide)
            {
                $el.find('.blocks').css('left',-(currentSlide-2)*carWidth+blockMargin);
                $el.find('.blocks').append($el.find('.blocks').children().first().clone());
                $el.find('.blocks').children().first().remove();
                currentSlide--;
            }
            $el.find('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
        }

        function prevCar(){
            var currentSlide=parseInt($el.find('.blocks').data('current'));
            currentSlide--;
            if(currentSlide<0)
            {
                $el.find('.blocks').css('left',-(currentSlide+2)*carWidth-blockMargin);
                $el.find('.blocks').prepend($el.find('.blocks').children().last().clone());
                $el.find('.blocks').children().last().remove();
                currentSlide++;
            }
            $el.find('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
        }
    }
     makeSlider('#carousel1');
    makeSlider('#carousel2');

[danik.js]

Все используемые скриптом элементы нужно искать не по всей странице, а только в обертке карусели. Вместо $('.blocks') должно быть $el.find('.blocks') или $('.blocks', $el) - это синонимы.


Кстати, зачем ты постоянно "ищешь" этот гребаный .blocks? Слабо найти один раз и записать результат в переменную?

[Kobe_kobe]

Исправил. Теперь, при клике на кнопку первой карусели, не реагирует. При клике на кнопку второй карусели листает два элемента второй карусели.

var carWidth=240;
    var visibleSlide = 3;
    var blockMargin = 10;

    function makeSlider (a) {
        var el;
        $el = $(a);
        var elBlock = $el.find('.blocks');
        $(function(){
        elBlock.width(elBlock.children().size()*carWidth);


            $el.find('.next_car').click(function(){
                nextCar();
            });
            $el.find('.prev_car').click(function(){
                prevCar();
            });
        });


        function nextCar(){
            var currentSlide=parseInt($el.find('.blocks').data('current'));
            currentSlide++;
            if(currentSlide>=visibleSlide)
            {
                elBlock.css('left',-(currentSlide-2)*carWidth);
                elBlock.append(elBlock.children().first().clone());
                elBlock.children().first().remove();
                currentSlide--;
            }
            $el.find('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
        }

        function prevCar(){
            var currentSlide=parseInt($el.find('.blocks').data('current'));
            currentSlide--;
            if(currentSlide<0)
            {
                elBlock.css('left',-(currentSlide+2)*carWidth);
                elBlock.prepend($el.find('.blocks').children().last().clone());
                elBlock.children().last().remove();
                currentSlide++;
            }
            $el.find('.blocks').animate({left: -currentSlide*carWidth},300).data('current',currentSlide);
        }
    }
     makeSlider('#carousel1');
     makeSlider('#carousel2');

[danik.js]

$el = $(a);

А где объявление $el? Без ключевого слова "var" ты неявно создал глобальную переменную (ОДНУ на два слайдера).

Ошибки дибильнейшие, надоело проверять их, так что гуд бай.

[Kobe_kobe]

я объявлял переменную var el; И глобально, и пробывал локально. Ошибка не меняется.

function makeSlider (a) {
        var el;

или

var el;
function makeSlider (a) {
.....

[danik.js]

$el или el?