WordPress : Le carrousel de hibou ne fonctionne pas dans le thème WordPress. Aidez-moi à résoudre ce problème
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,
})
0 commentaire