Sliders are an important element of modern websites and play an important part in making the website appear more interactive and engaging. When it comes to sliders, there are many options available based on your requirement and expertise on working with third-party code and libraries. One such popular slider library is the SwiperJS Slider. It is one of the most popular slider libraries around and is used by some of the world’s most popular brands on their websites and millions of users worldwide. In this article, we’re going to take a look at how to integrate Swiper slider in WordPress.
Why use Swiper Slider in WordPress?
Swiper slider is a powerful slider library used to add custom sliders in websites and mobile apps. It is quite popular with developers and for good reasons. Some of the amazing features offered bt SwiperJS include –
Native JavaScript
One of the prie reasons for swiper slider being the first choice of web developers is the fact that it’s built completely using native JavaScript without any libraries such as jQuery making it smaller in size and very efficient.
Highly Customizable
The slider is highly customizable with large array of properties and methods which we can use to customize the functioning of the slider as per our requirements. You can check out their official demo page to check what’s possible using SwiperJS.
Fully Responsive
The slider is fully responsive and adapts seamlessly to smaller screens. This makes swiper a great choice for use in mobile apps and websites.
Dynamic and Virtual Slides
Another feature of SwiperJS making it favorite of large companies is its use of virtual and dynamic slides. This keeps DOM size for the page low. Because of this, it is perfect for applications with large amount of content.
Apart from the above mentioned features, SwiperJS offers a lot more in terms of functionality and accessibility. Image Lazy Loading, parallax transitions, thumb control are just some of the amazing features offered by swiper slider.
How to Add Swiper Slider in WordPress?
Pre-requisites
Before we start with integrating Swiper slider in WordPress, I’m assuming you have a working knowledge of HTML, CSS and JS.
HTML: Providing the structure to slider and its content.
CSS: Styling the layout and structure of the slider to integrate it coherently with the project.
JS: Initializing and customizing the slider to integrate with the project.
Here’s a pen of what we will be creating in this article –
Adding the Slider Files
Firstly, we need to add the slider files in our project. Primarily, there are 3 ways we can add Swiper slider in our WordPress website –
using npm
We can use this method if our project uses a module system or project bundler such as WebPack. We just add Swiper directly in our JS file like so –
|
1 2 3 |
import Swiper from 'swiper'; |
This method is not natively supported in a conventional WordPress installation. In order to use this method, we need to install and set up Webpack in our theme directory. This method is a bit contrived and not relevant for this article.
using CDN
This is perhaps the easiest method to add swiper slider in wordPress. We can add the required swiper slider files by calling it from a CDN. So, swiper slider files are hosted on cdnjs.com. While there are a bunch of files, we just need two of them – swiper-bundle.min.js and swiper-bundle.min.css. Add the following code to the functions.php file in your theme –
|
1 2 3 4 5 6 7 |
function my_theme_enqueue_swiper() { wp_enqueue_style('swiper-css', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css'); wp_enqueue_script('swiper-js', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js'); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_swiper'); |
After saving, go to the browser. You’ll notice swiper-bundle.min.js and swiper-undle.min.css have been added to the <head> tag. It should look something like this –
|
1 2 3 4 5 |
<link rel="stylesheet" id="swiper-css-css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css?ver=6.6.2" type="text/css" media="all"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js?ver=6.6.2" id="swiper-js-js"></script> |
hosting slider locally
This is my go-to method whenever I have to integrate WordPress in a WordPress project. Hosting files locally prevents that precious HTTP Request to a third-party server to fetch slider resources. In order to integrate swiper slider using this method, go ahead and download the above mentioned swiper-bundle.min.js and swiper-bundle.min.css from its CDN library. After downloading, save it in your theme directory somewhere it’s easily accessible. For the sake of this article, we save it in assets/swiper directory.
After saving the files, add the following code to functions.php file in your theme directory –
|
1 2 3 4 5 6 7 |
function my_theme_enqueue_swiper() { wp_enqueue_style('swiper-css', esc_url(get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css')); wp_enqueue_script('swiper-js', esc_url(get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.js')); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_swiper'); |
Save the file and refresh the browser. You’ll see the respective files added in <head> like so –
|
1 2 3 4 |
<link rel="stylesheet" id="swiper-css-css" href="http://agnc/wp-content/themes/my-theme/assets/swiper/swiper-bundle.min.css?ver=6.6.2" type="text/css" media="all"> <script type="text/javascript" src="http://agnc/wp-content/themes/my-theme/assets/swiper/swiper-bundle.min.js?ver=6.6.2" id="swiper-js-js"></script> |
Adding HTML
Since we have added the slider now, it’s time to add the HTML for the slider.For this article’s sake, I’m adding it in index.php but you add it wherever you plan on adding your slider. Add the following code to index.php –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="slider-wrapper swiper"> <div class="swiper-wrapper"> <figure class="swiper-slide"> <img src="https://i.imgur.com/7KlwI8u.jpeg"/> </figure> <figure class="swiper-slide"> <img src="https://i.imgur.com/dC6vtFa.jpeg"/> </figure> <figure class="swiper-slide"> <img src="https://i.imgur.com/aJ3CO57.jpeg"/> </figure> <figure class="swiper-slide"> <img src="https://i.imgur.com/FUw1GSR.jpeg"/> </figure> <figure class="swiper-slide"> <img src="https://i.imgur.com/0AdBdns.jpeg"/> </figure> </div> </div> |
In the above code, we add 5 images wrapped in <figure> tag. These images are then wrapped in a div with .swiper-wrapper class which is further wrapped by .slider-wrapper div. Note that we have added .swiper class to the .slider-wrapper div. This is required for the slider to work properly.
Including CSS for the Slider
Now, we need to add some CSS for the slider so that it looks a little more structured. Add the following code to theme’s style.css file –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.slider-wrapper { max-height: 25rem; } .slider-wrapper figure { position: relative; overflow: hidden; padding-bottom: 65%; } .slider-wrapper img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center; } |
Initializing Slider with JS
Now that we have added the HTML and some CSS to make it a litte more structured, let’s go ahead and initialize the slider using JavaScript. For that, we need to create a file in which we put the slider’s code. Create a new file in assets folder titled custom.js. We need to enqueue this file. For that we need to modify the functions.php file where we added the slider.
Go to functions.php and modify the my_theme_enqueue_scripts() function like so –
|
1 2 3 4 5 6 7 8 |
function my_theme_enqueue_swiper() { wp_enqueue_style('swiper-css', esc_url(get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css')); wp_enqueue_script('swiper-js', esc_url(get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.js')); wp_enqueue_script('custom-js', esc_url(get_template_directory_uri() . '/assets/custom.js'), ['swiper-js'], null, true); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_swiper'); |
Note that in the code above, we have added the highlighted code to enqueue custom.js. Note the third argument in wp_enqueue_script is set to ['swiper-js'] . It is essential to make sure the swiper-bundle.min.js file is a dependency of custom.js file and loads before custom.js.
We are going to add our code initialize slider in this file. Add the following code to custom.js file –
|
1 2 3 |
const swiper = new Swiper('.swiper'); |
If you have been following the tutorial correctly up to now, you should see the slider in action in the front-end. But it will be a single image per slide. That is not very elegant. We need to customize the slider.
Customizing the Slider
To add customizations, we need to add a second options argument to our code above. Modify it like so –
|
1 2 3 4 5 6 7 |
const swiper = new Swiper('.swiper', { slidesPerView: 3, loop: true, spaceBetween: 10 }); |
In the code above, we added a second options argument adding custom options to modify the slider as per our requirements. Note that these are pretty basic customizations and you can customize it further as per your requirements and preferences. For complete list of options, please refer to swiper slider’s API reference.
Bonus
By now, we have a working slider. We can add navigation in the form of “Previous” and “Next” buttons. Also, we can add pagination buttons in the bottom. It is quite easy. We just need to modify the slider’s HTML. Go ahead and modify the slider’s HTML like so –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="slider-wrapper swiper"> <div class="swiper-wrapper"> <figure class="swiper-slide"> <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/1.jpg'); ?>"/> </figure> <figure class="swiper-slide"> <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/2.jpg'); ?>"/> </figure> <figure class="swiper-slide"> <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/3.jpg'); ?>"/> </figure> <figure class="swiper-slide"> <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/4.jpg'); ?>"/> </figure> <figure class="swiper-slide"> <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/5.jpg'); ?>"/> </figure> </div> <!-- Swiper pagination --> <div class="swiper-pagination"></div> <!-- Swiper Navigation --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> |
Note that we added div with .swiper-pagination class after the .swiper-wrapper slider element to add pagination. Also, to add navigation, we added divs with .swiper-button-prev and .swiper-button-next classes to act as arrows.
Finally, we modify our slider initialization in custom.js to include support for pagination and navigation like so –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const swiper = new Swiper('.swiper', { slidesPerView: 2, loop: true, spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', type: 'bullets', }, }); |
Here, we added navigation and pagination properties to our options argument. Note that this is the default documentation and it could customized easilyusing the Slider API.
Conclusion
So, that was it! In this article, we saw how to integrate Swiper Slider in WordPress. From adding the files to initializing the slider, we went through the whole process. In the end, we saw how we can add pagination as well as navigation to the slider.
SwiperJS is a very powerful library with plenty of features and customizations making it a favourite of developers and businesses.
Hope you were able to learn something new in this article. If you liked it, do check out our blog where we regularly post informative articles about JavaScript and WordPress gelping our readers advance their web development skills. See you in next article!
