兩張幻燈片匹配時貓頭鷹傳送帶警報

Question

我有兩個傳送帶see codpen link。我試着當兩個特定的幻燈片顯示對方像上面做一些事情：提前

function match(){ 
    var topCarousel = $('#carousel-top').data('owlCarousel'); 
    var bottomCarousel = $('#carousel-bottom').data('owlCarousel'); 
    if(topCarousel.currentItem === 2 && bottomCarousel.currentItem === 2){alert('Match!')}} 

感謝

Answer 1

http://codepen.io/anon/pen/xbZLGb

使用afterMove事件來獲得當前的索引轉盤，然後兩個請致電功能match()。

// the current value of the index for both the carousel 
var currIndTop=0; 
var currIndBottom=0; 

$(document).ready(function(){ 
    $('#carousel-top').owlCarousel({ 
    singleItem : true, 
    pagination : false, 
    navigation: true, 
    navigationText: [ 
     "<i class='icon left'></i>", 
     "<i class='icon right'></i>" 
     ], 
    // an event that is triggered when the slide changes 
    afterMove:function(i){ 
     // get top carousel 
     var $car = $('#carousel-top').data('owlCarousel'); 
     // get current index for top carousel 
     currIndTop = $car.currentItem; 
     match(); 
    } 
    }); 

    // similarly to the previous carousel 
    $('#carousel-bottom').owlCarousel({ 
    singleItem : true, 
    pagination : false, 
    navigation: true, 
    navigationText: [ 
     "<i class='icon left'></i>", 
     "<i class='icon right'></i>" 
     ], 
    afterMove:function(i){ 
     var $car = $('#carousel-bottom').data('owlCarousel'); 
     currIndBottom = $car.currentItem; 
     match(); 
    } 
    }); 

    function match(){ 
     // this is unnecessary. I forgot to delete 
     // var topCarousel = $('#carousel-top').data('owlCarousel'); 
     // var bottomCarousel = $('#carousel-bottom').data('owlCarousel'); 

     if(currIndBottom === 2 && currIndBottom === 2){alert('Match!')} 
    } 


    $(".header-top,.header-bottom") 
    .velocity("transition.slideLeftIn", { stagger: 300 }) 
    .delay(750) 

});