WordPress : Le carrousel de hibou ne fonctionne pas dans le thème WordPress. Aidez-moi à résoudre ce problème

Publié par Jean-Michel le

J’essaie de convertir un modèle HTML en thème WordPress. Le carrousel Owl fonctionne bien dans un modèle HTML. Mais cela ne fonctionne pas dans le thème WordPress. Le problème principal est dans le modèle HTML que les classes de carrousel Owl obtiennent automatiquement par Jquery. Mais lorsque je convertis le modèle HTML en un thème WordPress, les classes de carrousel Owl ne sont pas prises en compte.

Mon code HTML :-

<!-- 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>

Mon code WordPress :-

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

}

Solution n°1 trouvée

Dans function.php ajouter ces 3 fichiers : owl.carousel.min.js & owl.carousel.css & jquery.js

En <!-- Media Gallery -->partie, vous avez besoin d’une div avec owl-carousel & owl-theme
par exemple :

 <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>

et dans le fichier js ajouter

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

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *