1) Step one
First download owl carasoul files from
https://owlcarousel2.github.io/OwlCarousel2/
extract the zip file and and create a folder named( inc ) under divi child theme via ftp or and file manager plugin. and upload the required files
1) owl.carousel.min.css
2) owl.carousel.min.js
3) owl.carousel.theme.min.css
4) owl.theme.default.css
2. Step two
go to function.php file and add this code
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function custom_scripts_styles() { global $wp_styles; // /** // * OwlCarousel Library // */ wp_enqueue_script( 'owl.carousel', get_stylesheet_directory_uri() . '/inc/owl.carousel.min.js', array( 'jquery' ), '20160115', true ); wp_enqueue_style( 'owl.carousel', get_stylesheet_directory_uri() . '/inc/owl.carousel.min.css' ); wp_enqueue_style( 'owl.carousel.theme', get_stylesheet_directory_uri() . '/inc/owl.theme.default.css' ); } add_action( 'wp_enqueue_scripts', 'custom_scripts_styles' );
3) Step three
put a id in the section whatever you want.
4. Step 4
put this code to the theme option intergation tab under head
<script> jQuery(document).ready(function(){ jQuery("#sliding-row").addClass("owl-carousel custom-slider"); }); jQuery(document).ready(function(){ setTimeout(function(){ jQuery("body.home.et-bfb-distraction-free-mode iframe #page-container #sliding-row").removeClass("owl-carousel"); }, 50); }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.custom-slider').owlCarousel({ loop:true, rewind: true, margin:50, responsiveClass:true, nav:true, autoplay:true, autoplayTimeout:8000, smartSpeed:2000, responsive:{ 0:{ items:1, nav:true }, 600:{ items:2, nav:true }, 1000:{ items:3, nav:true, loop:true } } }) }); </script>
Thats it… enjoy Buneo
Want to hire a wordpress dev ping me on
skype: live:bijoyskakati
or
Email me: bijoyskakati@gmail.com
Bijoy Edited question November 11, 2021