0

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
Add a Comment