i know owl carousel is deprecated, i just want to know if convert below code from jquery to pure javascript , how to do it?
function Init() {
var owl = $('.carousel'),
itemsBgArray = [], // to store items background-image
itemBGImg;
owl.owlCarousel({
items: 1,
smartSpeed: 2000,
autoplay: true,
autoplayTimeout: 8000,
autoplaySpeed: 1000,
stagePadding: 0,
margin:0,
loop: true,
nav: true,
dots:false,
navText: false,
onTranslated: function () {
changeNavsThump();
}
});
var owlItem = $('.owl-item'),
owlLen = owlItem.length;
/* --------------------------------
* store items bg images into array
--------------------------------- */
$.each(owlItem, function( i, e ) {
itemBGImg = $(e).find('.owl-item-bg').data('src');
itemsBgArray.push(itemBGImg);
});
/* --------------------------------------------
* nav control thump
* nav control icon
--------------------------------------------- */
var owlNav = $('.owl-nav'),
el;
$.each(owlNav.children(), function (i,e) {
el = $(e);
// append navs thump/icon with control pattern(owl-prev/owl-next)
el.append('<div class="'+ el.attr('class').match(/owl-w{4}/) +'-thump">');
el.append('<div class="'+ el.attr('class').match(/owl-w{4}/) +'-icon">');
});
$( ".owl-prev-icon").html('<svg xmlns="http://www.w3.org/2000/svg" class="size-12 text-primclr" viewBox="0 0 24 24"><path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z"/></svg>');
$( ".owl-next-icon").html('<svg xmlns="http://www.w3.org/2000/svg" class="size-12 text-primclr" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"/></svg>');
/*-------------------------------------------
Change control thump on each translate end
------------------------------------------- */
function changeNavsThump() {
var activeItemIndex = parseInt($('.owl-item.active').index()),
prevItemIndex = activeItemIndex != 0 ? activeItemIndex - 1 : owlLen - 1,
nextItemIndex = activeItemIndex != owlLen - 1 ? activeItemIndex + 1 : 0;
$('.owl-prev-thump').css({
backgroundImage: 'url(' + itemsBgArray[prevItemIndex] + ')'
});
$('.owl-next-thump').css({
backgroundImage: 'url(' + itemsBgArray[nextItemIndex] + ')'
});
}
changeNavsThump();
}