How to create a slider in WordPress?

If you’re a beginner how to create a slider in WordPress tutorial absolutely is for you. You’ll learn to create a slider in simple steps.
In this tutorial I’ll show you how to create a slider using OWL Carousel. This is a free and useful slider to you can use in many occasions. Also it consists of much more features to use. Along with those it has details documentation to refer.
Let’s see how we can digging into this:
- Download the owl carousel.
- Place
owl.carousel.min.css
andowl.theme.default.min.css
in yourCSS
folder. - Place
owl.carousel.min.js
in youJS
folder. - Enqueue files via
functions.php
file. - Prepare HTML for the slider
- Initialize Owl Carousel
- You’re done.
Enqueue required files via functions.php
First you need to enqueue required stylesheets and JS files via functions file. Some are not enqueuing via functions.php, website works but that is not a good practice to do. Best method is enqueue files.
If you’re not familiar with enqueuing CSS/JS
files via function file please follow our tutorial on enqueue stylesheets and JavaScript files via functions.php file.
Your enqueuing codes should like this.
// CSS Enqueue wp_enqueue_style( 'owl', get_template_directory_uri() . '/path/to/css/owl.carousel.min.css' ); wp_enqueue_style( 'owl-theme', get_template_directory_uri() . '/path/to/css/owl.theme.default.min.css' ); // JS Enqueue wp_enqueue_script( 'owl', get_template_directory_uri() . '/path/to/js/owl.carousel.min.js' );
HTML Preparation for Owl Carousel
Your HTML block should like this. owl-carousel
class should be must. You can’t remove that one. But you can add new classes and a ID. And also you can add any number of slides as well. For this example I have used three ite
<div class="owl-carousel owl-theme"> <div class="item"> <img src="/path/to/slide_01.jpg" alt="" /> </div> <div class="item"> <img src="/path/to/slide_02.jpg" alt="" /> </div> <div class="item"> <img src="/path/to/slide_03.jpg" alt="" /> </div> </div>
Initialize Owl Carousel
jQuery is essential to use Owl Carousel. Before adding the code you must have enqueued jQuery as well. I hope that you’ve already enqueued jQuery. To initialize the Owl Carousel you need to use below script. To add such kind of a script better to have separate JS file to add custom JavaScript/jQuery codes. If you don’t have a separate file yet, please create and enqueue first. Like below. Will name the file as main.js
. You can use any name for this. But this file should enqueue in the bottom of the scripts.
wp_enqueue_script( 'main', get_template_directory_uri() . '/path/to/js/main.js' );
Now open up the file and add the initialized code to it. See below:
$(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, items:1, margin:0, autoplay:true, autoplayTimeout:2500, autoplayHoverPause:true, smartSpeed:450, dots: false, nav:true }); });
Hope you’ll enjoyed this tutorial regarding create a simple slider in WordPress using Owl Carousel. Happy learning ahead. Thanks for reading.
Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch. You’ll be able to create your own theme at the end of these lessons.