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

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

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

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

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

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

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

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

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

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

Спасибо. Функция заработала, но работает некорректно. При нажатие на кнопку первой карусели два раза перелистывает вторую(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');

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


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

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

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

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

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

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

function makeSlider (a) {
        var el;

или

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

$el или el?