Owl carousel does not working in WordPress theme. Help me to solve this problem

Question

I am trying to convert an HTML template to a WordPress theme. Owl carousel works fine in an HTML template. But it does not work in the WordPress theme. The main problem is in the HTML template the Owl carousel classes get automatically by Jquery. But when I convert the HTML template into a WordPress theme the Owl carousel classes don't get.

My HTML code:-

<!-- Media Gallery -->
                                    <div class="blog-media">
                                        <ul class="clearlist content-slider light-content">
                                            <li>
                                                <img src="<?php echo get_template_directory_uri()?>/images/full-width-images/section-bg-16.jpg" alt="" />
                                            </li>
                                            <li>
                                                <img src="<?php echo get_template_directory_uri()?>/images/full-width-images/section-bg-14.jpg" alt="" />
                                            </li>
                                        </ul>
                                    </div>

My WordPress code:-

add_action('wp_enqueue_scripts', 'rythm_scripts');

function rythm_scripts()
{
    wp_enqueue_script( 'jq', get_template_directory_uri().'/js/jquery-3.5.1.min.js');
    wp_enqueue_script( 'easing', get_template_directory_uri().'/js/jquery.easing.1.3.js', array('jq'), '', true);
    wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/js/bootstrap.bundle.min.js',array('jq'),'', true);
    wp_enqueue_script( 'smoothscroll', get_template_directory_uri().'/js/SmoothScroll.js',array('jq'), '',true);
    wp_enqueue_script( 'scrollto', get_template_directory_uri().'/js/jquery.scrollTo.min.js',array('jq'), '',true);
    wp_enqueue_script( 'localscroll', get_template_directory_uri().'/js/localScroll.min.js',array('jq'), '',true);
    wp_enqueue_script( 'viewport', get_template_directory_uri().'/js/jquery.viewport.mini.js',array('jq'), '',true);
    wp_enqueue_script( 'countto', get_template_directory_uri().'/js/countTo.js',array('jq'), '',true);
    wp_enqueue_script( 'appear', get_template_directory_uri().'/js/jquery.appear.js',array('jq'), '',true);
    wp_enqueue_script( 'parallax', get_template_directory_uri().'/js/jquery.parallax-1.1.3.js');
    wp_enqueue_script( 'fitvids', get_template_directory_uri().'/js/jquery.fitvids.js',array('jq'), '',true);
    wp_enqueue_script( 'jq', get_template_directory_uri().'/js/jquery-3.5.1.min.js', '', true);
    wp_enqueue_script( 'owlslider', get_template_directory_uri().'/js/owl.carousel.min.js', array('jq'), '',true);
    wp_enqueue_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js',array('jq'), '',true);
    wp_enqueue_script( 'imagesloaded', get_template_directory_uri().'/js/imagesloaded.pkgd.min.js',array('jq'), '',true);
    wp_enqueue_script( 'magnific', get_template_directory_uri().'/js/jquery.magnific-popup.min.js',array('jq'), '',true);
    wp_enqueue_script( 'masonry', get_template_directory_uri().'/js/masonry.pkgd.min.js',array('jq'), '',true);
    wp_enqueue_script( 'lazyload', get_template_directory_uri().'/js/jquery.lazyload.min.js',array('jq'), '',true);
    wp_enqueue_script( 'wow', get_template_directory_uri().'/js/wow.min.js',array('jq'), '',true);
    wp_enqueue_script( 'morphext', get_template_directory_uri().'/js/morphext.js',array('jq'), '',true);
    wp_enqueue_script( 'typed', get_template_directory_uri().'/js/typed.min.js',array('jq'), '',true);
    wp_enqueue_script( 'all', get_template_directory_uri().'/js/all.js',array('jq'), true);
    wp_enqueue_script( 'contact', get_template_directory_uri().'/js/contact-form.js',array('jq'), '',true);
    wp_enqueue_script( 'ajaxchimp', get_template_directory_uri().'/js/jquery.ajaxchimp.min.js',array('jq'), '',true);
    wp_enqueue_script( 'object', get_template_directory_uri().'/objectFitPolyfill.min.js',array('jq'), '',true);
    wp_enqueue_script( 'splitting', get_template_directory_uri().'/js/splitting.min.js',array('jq'), '',true);

}

Answer 1

In function.php add these 3 files: owl.carousel.min.js & owl.carousel.css & jquery.js

In <!-- Media Gallery --> part you need a div with owl-carousel & owl-theme
for ex:

 <ul id="example" class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
 </ul>

and in js file add

$('#example').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
 })