Want to update the slider in owl.carousel.2.0.0-beta.2.4

Question

I have created a slider using owl carausel in which i add border and myClass to first active element of slider. its work fine. but now i want to update in owl.carousel.2.0.0-beta.2.4 but some functions are deprecated like afterMove, so i didn't find a proper method to update this slider. please suggest me right path. thanks in advance.

My code is as follow:

          $(document).ready(function(){
                 $("#owl-demo").owlCarousel({

                        autoPlay: 3000, //Set AutoPlay to 3 seconds
                        responsive: true,
                        loop: true,
                        addClassActive: true,
                        items: 4,
                        stopOnHover:true,
                        afterMove:function(){
                            //console.log(1);
                            $(".owl-item").css({
                                border: 'none',
                            })
                            $(".owl-item").removeClass( "myClass" );
                            $(".active").eq(0).css({
                                border: '2px solid red',

                            })
                            $(".active").eq(0).addClass( "myClass");
                            var myValue = $( ".myClass" ).find('.dd').html();
                            $("#content").html(myValue);

                        },
                        afterInit:function(){
                            $(".active").eq(0).css({
                                border: '2px solid red',
                            })
                            $(".active").eq(0).addClass( "myClass");
                            var myValue = $( ".myClass" ).find('.dd').html();
                            $("#content").html(myValue);
                        }

                    });

          });

Answer 1

OwlCarousel2 has another way to use callbacks and has many callbacks but the names has change

you can see all callbacks here http://www.owlcarousel.owlgraphic.com/docs/api-events.html#carousel

in this case you should update your code like this

$(document).ready(function(){
  $("#owl-demo").owlCarousel({
    autoPlay: 3000, //Set AutoPlay to 3 seconds
    responsive: true,
    loop: true,
    items: 4,
    autoplayHoverPause:true,
    onInitialize: callback,
    onTranslated: callback // aftermove callback
  });

  function callback(onInitialize) {
    //console.log(1);
    $(".owl-item").css({
      border: 'none',
    })
    $(".owl-item").removeClass( "myClass" );
    $(".active").eq(0).css({
      border: '2px solid red',

    })
    $(".active").eq(0).addClass( "myClass");
    var myValue = $( ".myClass" ).find('.dd').html();
    $("#content").h
  }

  function callback(onTranslated) {
    $(".active").eq(0).css({
      border: '2px solid red',
    })
    $(".active").eq(0).addClass( "myClass");
    var myValue = $( ".myClass" ).find('.dd').html();
    $("#content").html(myValue);
  }

});