Tarnjeet Singh Tarnjeet Singh - 2 months ago 17
jQuery Question

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

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

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

});
Comments