I am trying to add a carousel, Owl script, and I am also using selective refresh in widgets.
Each widget is a carousel item/slide, I got the carousel to reinitialize when a widget is added, the problem is I can’t change the items position when I move those widgets.
The script looks like this:
$( document ).ready(function() {
var newCarousel = $('carousel');
newCarousel.owlCarousel({
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:false
},
1000:{
items:4,
nav:true,
loop:false
}
}
});
$('.next').click(function(event) { event.preventDefault(); newCarousel.trigger('next.owl.carousel', [200]); });
$('.prev').click(function(event) { event.preventDefault(); newCarousel.trigger('prev.owl.carousel', [200]); });
if ( 'undefined' !== typeof wp && wp.customize ) {
wp.customize.selectiveRefresh.bind( 'sidebar-updated', function( sidebarPartial ) {
if ( 'sidebar-id' === sidebarPartial.sidebarId ) {
newCarousel.data('owlCarousel').destroy();
newCarousel.removeClass('owl-carousel owl-loaded');
newCarousel.find('.owl-stage-outer').children().unwrap();
newCarousel.removeData();
newCarousel.owlCarousel();
}
});
}
});
Thanks in advance!