|
Getting your Trinity Audio player ready...
|
Step 3: Enqueue Owl Carousel Scripts
Next, you need to add Owl Carousel’s CSS and JavaScript files to your WordPress theme. You can do this by adding the following code to your child theme’s functions.php file:
function enqueue_owl_carousel() {
wp_enqueue_style('owl-carousel-css', 'https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
wp_enqueue_style('owl-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
wp_enqueue_script('owl-carousel-js', 'https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js', array('jquery'), null, true);
wp_enqueue_script('custom-slider', get_template_directory_uri() . '/js/custom-slider.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_owl_carousel');
This ensures that the Owl Carousel files are loaded on your website.
4. Custom CSS and JavaScript Code for Your Infinite Slider
Once the script and styles are loaded, you can initialize the infinite slider with a custom JavaScript file. Create a new file named custom-slider.js in your theme’s js folder and add the following code:
jQuery(document).ready(function($) {
$('.product-slider').owlCarousel({
loop: true,
margin: 10,
nav: true,
autoplay: true,
autoplayTimeout: 3000,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
});
This JavaScript initializes the Owl Carousel slider and sets it to loop infinitely. You can adjust the autoplay speed, items per view, and other options based on your design needs.
