How to add Owl carousel slider in Magento 2?
The Owl Carousel is a very popular image carousel that is highly customizable, supports touch, and is fully responsive. Adding a Magento 2 Carousel is a great way to design your site in an eye-catching way that drives traffic and lead generation.
Note: There are several file paths in this tutorial. For this to work, ensure you are using the exact same file path. If you are missing folders, be sure to create them in order for the code to function correctly.
Step 1: Download The CSS and JS Files And Add Them To Your Site
To add your Magento 2 carousel slider, you must first download the CSS and JS files from the Owl Carousel site here.
Once you have the code, add the CSS to this folder in your site’s directory:
app/design/frontend/package_name/theme_name/Magento_Catalog/web/css
The package and theme name will depend on what theme you are using for your site. If you are using a custom theme, you can just use “custom.” You may also omit the “Magento_Catalog” reference.
Calling the CSS in a layout file is considered best practice. Navigate to:
app/design/frontend/package_name/theme_name/Magento_Theme/layout/default_head_blocks.xml
Use the following code:
<head>
<css src="css/owl.carousel.min.css" rel="stylesheet" type="text/css" />
<css src="css/owl.theme.default.min.css" rel="stylesheet" type="text/css" />
</head>
Next, add the JS file to this folder in your site’s directory:
app/design/frontend/package_name/theme_name/Magento_Catalog/web/js
Step 2: Add Require Carousel Module To Config File
If you do not already have a require-config.js file, you will need to create one. It is standard practice to use this JS file for all site configurations. This file should be located at:
app/design/frontend/package_name/theme_name/Magento_Catalog/requre-config.js
Paste the following code into this file:
var config = {
paths: {
'owlcarousel': "Magento_Theme/js/owl.carousel"
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};Step 3: Add The Slider Block To Your Page
The next step is to open up your page content file. This will be a phtml file that will be the name of whatever page you want to add the slider to. It will likely be located in your site directory here:
app/design/frontend/package_name/theme_name/Magento_Catalog/name_of_page.phtml
Within the phtml file, paste the following code:
<!DOCTYPE html>
<html>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="{Image path}" />
</div>
<div class="item">
<img src="{Image path}" />
</div>
<div class="item">
<img src="{Image path}" />
</div>
<div class="item">
<img src="{Image path}" />
</div>
<div class="item">
<img src="{Image path}" />
</div>
<div class="item">
<img src="{Image path}" />
</div>
</div>
</body>
</html>
This has now added a block in your site and called the carousel to appear.
Step 4: Add the RequireJS Module
Next, you’ll need to add the following JS script to ensure that your carousel functions correctly. This script can be added within the same content page as earlier, or it can be added to your site’s custom JS file. There are a few ways to write this script. This is just one example below of what the code would look like added to a JS file. If adding the same code to your PHTML file, the syntax would be slightly different and you would need to remember your <script> tags.
require(['jquery', 'owlcarousel'], function($){
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:4
}
}
});
});
});It should be noted that the Owl Carousel has a wide range of customization options that you can add to this code snippet. These include, autoplay, number of items, and the size of those items. In this code snippet, the max number of items displayed will be 4 and it will reach the full width of the site. However, on smaller screens the number of items will be reduced so that the images can be seen in greater detail. A medium screen would have 3 images and a mobile screen would just have one. Tweak these settings based on your preferences. A Magento 2 Owl Carousel or banner slider are both excellent design choices for any website.
Learn more about Amasty’s easy-to-use banner slider plugin for Magento 2 and take the hassle out of designing your site!