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

Question

I'm trying to trigger a click event after i use slider in thumbnails section, i have found the way when i'm click, go next and go back, but i need to trigger the "click" event when i'm change it based on "drag" or "next / back" event is happen.

my code:

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

My issue are in the function here:

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

Answer 1

I have found the awnser about my issue, and its wokring :)

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