Owl 轮播 2 - 已更改触发点击事件的问题

Question

我试图在缩略图部分使用滑块后触发点击事件，我已经找到了点击、下一步和返回的方法，但我需要触发 "click"当我根据 "drag" 或 "next / back" 事件发生时更改它的事件。

我的代码：

$.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!');
});

Answer 1

我找到了关于我的问题的答案，并且有效:)

  $.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));
    });

Owl 轮播 2 - 已更改触发点击事件的问题

Owl Carousel 2 - on changed issue with trigger a click event

javascript

jquery

owl-carousel-2