Как сделать чтобы слайдер прокручивал свой объект а не все на страничке?

Question

[viklenko]

(function ($) {
    $.fn.slide = function () {
        var imgWidth = $(this).children().children().width();
        var imgInBlock = Math.ceil(($(this).width() / imgWidth) + 1); //
        var lengthSlide = 1;
        console.log(this[0].children);
        var curWidth = 0; //
        var totalImage = $('.slidewrapper').children().length; //
        var curImg = 0;

        $('.next-btn').click(function () {
            if (curImg <= totalImage - (imgInBlock)) {
                curWidth -= imgWidth * lengthSlide;
                $('.slidewrapper').css('transform', 'translate' + '(' + curWidth + 'px)');
                curImg++;
            }
        })

        $('.prev-btn').click(function () {
            if (curImg > 0) {
                curWidth += imgWidth * lengthSlide;
                $('.slidewrapper').css('transform', 'translate' + '(' + curWidth + 'px)');
                curImg--;
            }
        })


    };
})(jQuery);

Фото

spoiler

как видите на страничке есть два блока со слайдом изображений, и вот скрипт прокручивает все эти блоки, а нужно сделать так чтобы он прокручивал лишь свой блок. Имена классов одинаковы, как это сделать ? через селекторы? если да то как, пробовал через this, не выходит

Comments

[viklenko]

пробовал скачать готовые слайдеры, но там всё через #id идёт, нельзя больше одного разместить. Может есть у кого слайдер, где могу код разобрать и понять как такое реализовать лучше