jquery - 複数のカルーセルを1ページで機能させるにはどうすればよいですか？

Question

1ページに2つのカルーセルがありますが、残念ながらそれらは互いにコピーしています。

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

私を正しい方向に向けるための助けをいただければ幸いです。

外部プラグインを使いたくない。ありがとう。

Answer 1

クリック イベント スコープを高く変更しました

$('.c_next',carousel )

と

$('.c_prev',carousel )

フィドル

Answer 2

これらの行の代わりに

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

これを使って

$(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 3

問題は、誰かが他のカルーセルをクリックした場合でも、クリック イベントが実行されることです。

この更新されたフィドルを確認してください：

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

私が変更され

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

に

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

他のクリックイベントと同じです。

Answer 4

両方のカルーセルのすべての要素のクラスは同じです。スクリプトはクラスを見て要素を選択するだけで、両方のカルーセルが同じクラスを共有するため、両方のカルーセルでスクリプトを実行します。これを修正する方法はたくさんあります。「リンク」を含む にdata-...属性を追加できます。div

<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>

次に、独自のスクリプトを使用して編集し、以下をターゲットにすることができます。

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

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

Answer 5

$(element) を変数で既に定義している場合は、何度も使用する必要はありません。冗長です。

動作および精製されたデモ

そして使用：

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

あなたのコード:

/**
* @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();