Skip to content

how to convert below owl-carousel jquery code into pure javascript code

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