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)

});

当两张幻灯片匹配时，猫头鹰轮播警报

1 个答案: