代码之家 › 专栏 › 技术社区 › ParisNakitaKejser

猫头鹰旋转木马2-关于触发点击事件的已更改问题

owl-carousel-2 jquery javascript

0

ParisNakitaKejser · 技术社区 · 8 年前

我试图触发一个点击事件后,我使用滑块在缩略图部分,我已经找到了方法,当我点击,下一步和返回,但我需要触发“点击”事件时,我改变它基于“拖动”或“下一步/返回”事件发生。

我的代码:

$.view_travel_sight = {
  owl: null,

  owl_next: function() {
    $.view_travel_sight.owl.trigger('next.owl.carousel');
  },

  owl_back: function() {
    $.view_travel_sight.owl.trigger('prev.owl.carousel');
  },

  owl_carousel_change_photo: function(num) {
    console.log('click trigger');

    var active_photo = $('[data-photo-thumb-number="'+ num +'"]');
    var id = active_photo.attr("data-photo-thumb-number");
    var src_photo = active_photo.attr("data-img-src");
    var src_id = active_photo.attr("data-img-id");
    var src_alt = active_photo.attr("alt");

    $('#sights-big-picture').attr({
      'src' : src_photo
    });

    $('#photo-header').html($('#header-'+ src_id).html());
    $('#photo-description').html($('#description-'+ src_id).html());
  },

  owl_carousel_hadnler: function() {
    $.view_travel_sight.owl = $('.owl-carousel');

    $.view_travel_sight.owl.children().each( function( index ) {
      $(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
    });

    $.view_travel_sight.owl.owlCarousel({
      loop:true,
      center:true,
      margin:10,
      dots:false,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:3
          },
          1000:{
              items:5
          }
      }
    });

    $.view_travel_sight.owl.on('click','.owl-item', function(event) {
      event.preventDefault();
      $.view_travel_sight.owl_carousel_change_photo($(event.currentTarget.children[0]).data('index-num'));
    });

    $.view_travel_sight.owl.on('click','.owl-item>div', function(event) {
      $.view_travel_sight.owl.trigger('to.owl.carousel', $(this).data('position'));
    });

    $.view_travel_sight.owl.on('changed.owl.carousel', function(e) {
      console.log('changed!');
    });
  }
};

我的问题在于:

$.view_travel_sight.owl.on('changed.owl.carousel', function(e) {
    console.log('changed!');
});

1 回复 | 直到 8 年前

1

0

ParisNakitaKejser 8 年前

我已经找到了关于我的问题的答案,以及它的答案:)

  $.view_travel_sight.owl.on('changed.owl.carousel', function(event) {
      event.preventDefault();

      obj = $('div[class=item]')[event.property.value];

      $.view_travel_sight.owl_carousel_change_photo(($(obj).data('position')+1));
    });