How to make my multiple carousels work on one page?

Question

I have two carousels on one page but unfortunately they copy each other.

http://jsfiddle.net/seanjacob/tB6y5/

Any help to point me in the right direction would be appreciated.

I do not want to use an external plugin. Thanks.

Answer 1

You don't need to use over and over $(element) if you defined it already in a variable. It's redundant.

working and purified demo

and use:

carousel.on('click','.your_class', function (event) {

Your code:

/**
* @author Sean Jacob
* @extends jquery
*/

$.fn.wf_carousel = function () {
    var carousel = $(this);

    if (carousel) {        

        var c_mask = carousel.children('.c_mask'),
        c_width = c_mask.outerWidth(),
        c_overflow = c_mask.children('.c_overflow'),
        c_slides = c_overflow.find('.c_slide'),
        c_count = c_slides.length,
        c_nav = carousel.children('.c_nav');

        c_overflow.children('.c_slide:nth-child(1)').addClass('active');
        c_nav.children('.c_anchor:nth-child(1)').addClass('active');

        carousel.on('click','.c_next', function (event) {
            c_current();

            if (c_position == c_count) { c_position = 0; }

            c_update(c_position + 1);

            c_overflow.stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');
        });

        carousel.on('click','.c_prev', function (event) {
            c_current();

            if (c_position == 1) { c_position = c_count + 1; }

            c_update(c_position - 1);

            c_overflow.stop(true, false).animate({ left: '-' + (c_position - 2) * c_width + 'px' }, 'slow');
        });

        carousel.on('click','.c_anchor', function (event) {
            c_current()

            c_position = $(this).index();

            c_update(c_position + 1);

            c_overflow.stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');

        });

    }

    function c_current() {
        c_active = c_overflow.children('.c_slide.active');
        c_activeAnchor = c_nav.children('.c_anchor.active');
        c_position = c_active.index();
        c_position = c_position + 1;
    }

    function c_update(c_position) {
        c_active.removeClass('active');
        c_activeAnchor.removeClass('active');
        c_overflow.children('.c_slide:nth-child(' + c_position + ')').addClass('active');
        c_nav.children('.c_anchor:nth-child(' + c_position + ')').addClass('active');
    }
};


$('#c_main').wf_carousel();
$('#c_second').wf_carousel();

Answer 2

All elements in both carousels have the same classes. Your script only selects elements by looking at their class and since both carousels share the same classes it'll execute your script in both carousels. There are a lot of ways to fix this. You could add a data-... attribute to the div's that contain the "links":

<div class="c_nav">
    <div class="c_anchor" data-target="c_main">1</div>
    <div class="c_anchor" data-target="c_main">2</div>
    <div class="c_anchor" data-target="c_main">3</div>
    <div class="c_anchor" data-target="c_main">4</div>
</div>
<div class="c_next" data-target="c_main">next</div>
<div class="c_prev" data-target="c_main">prev</div>

Then you could use your own script and edit it to target the following:

var carTarget = '#' + $(this).attr('data-target');

//let your functions apply to $(carTarget).animate( etc.

Answer 3

The problem is, that your click events are executed, even when someone clicks the other carousel.

Check this updated fiddle:

http://jsfiddle.net/tB6y5/3/

I changed

$('.c_next').click(...)

to

carousel.find('.c_next').click(...)

the same with the other click events.

Answer 4

Instead of these lines

$('.c_next')
$('.c_prev')
$('.c_anchor')

Use this

$(this).find('.c_next')
$(this).find('.c_prev')
$(this).find('.c_anchor')


$.fn.wf_carousel = function () {
    var carousel = $(this);

    if (carousel) {        

        var c_mask = $(carousel).children('.c_mask'),
        c_width = $(c_mask).outerWidth(),
        c_overflow = $(c_mask).children('.c_overflow'),
        c_slides = $(c_overflow).children('.c_slide'),
        c_count = $(c_slides).length,
        c_nav = $(carousel).children('.c_nav');

        $(c_overflow).children('.c_slide:nth-child(1)').addClass('active');
        $(c_nav).children('.c_anchor:nth-child(1)').addClass('active');

        $(this).find('.c_next').click(function (event) {
            c_current();

            if (c_position == c_count) { c_position = 0; }

            c_update(c_position + 1);

            $(c_overflow).stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');
        });

         $(this).find('.c_prev').click(function (event) {
            c_current();

            if (c_position == 1) { c_position = c_count + 1; }

            c_update(c_position - 1);

            $(c_overflow).stop(true, false).animate({ left: '-' + (c_position - 2) * c_width + 'px' }, 'slow');
        });

        $(this).find('.c_anchor').click(function (event) {
            c_current()

            c_position = $(this).index();

            c_update(c_position + 1);

            $(c_overflow).stop(true, false).animate({ left: '-' + (c_position) * c_width + 'px' }, 'slow');

        });

    }

    function c_current() {
        c_active = $(c_overflow).children('.c_slide.active');
        c_activeAnchor = $(c_nav).children('.c_anchor.active');
        c_position = $(c_active).index();
        c_position = c_position + 1;
    }

    function c_update(c_position) {
        $(c_active).removeClass('active');
        $(c_activeAnchor).removeClass('active');
        $(c_overflow).children('.c_slide:nth-child(' + c_position + ')').addClass('active');
        $(c_nav).children('.c_anchor:nth-child(' + c_position + ')').addClass('active');
    }
};


$('#c_main').wf_carousel();
$('#c_second').wf_carousel();
​

Answer 5

You had the click event scope to high change to

$('.c_next',carousel )

and

$('.c_prev',carousel )

fiddle