One of the most well-liked image carousels is the Owl Carousel, which is fully responsive, supports touch, and highly configurable. One excellent method to design your website in a way that attracts visitors and generates leads is to incorporate a Magento 2 Carousel.
Note: This tutorial contains multiple file paths. Make sure you are using the exact same file path for this to function. To ensure that the code runs properly, make sure to create any missing folders.
First, you have to download the CSS and JS files from the Owl Carousel site in order to add your Magento 2.
Then, add the CSS to this folder located in the directory of your website:
app/design/frontend/package_name/theme_name/Magento_Catalog/web/css
The package and theme name for your website are determined by the theme you select. You can simply use “custom” if you are using a custom theme. The “Magento_Catalog” reference can also be left out.
One of the best practices is to call the CSS within a layout file. Go to:
app/design/frontend/package_name/theme_name/Magento_Theme/layout/default_head_blocks.xml
Use this 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>
Then, in the directory of your website, add the JS file to this folder:
app/design/frontend/package_name/theme_name/Magento_Catalog/web/js
You will need to create a require-config.js file if you do not already have one. Using this JS file for all site configurations is standard procedure. This file can be found at:
app/design/frontend/package_name/theme_name/Magento_Catalog/requre-config.js
Copy the code below and paste it into this file:
var config = {
paths: {
'owlcarousel': "Magento_Theme/js/owl.carousel"
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};
To continue, you must first access your page content file. The name of the page to which you wish to add the slider will appear in this phtml file. It’s probably in your site directory over here:
app/design/frontend/package_name/theme_name/Magento_Catalog/name_of_page.phtml
Paste the following code into the phtml file:
<!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 called the carousel to appear and added a block to your website.
Next, you’ll need to include this JavaScript code to make sure your carousel works properly. You can add this code either directly to the same page where you’ve placed your carousel or into your website’s custom JavaScript file. There are various ways to write this code, and here’s an example of what it might look like in a JavaScript file. If you’re adding it to a PHTML file, the syntax would be a bit different, and you’ll need to remember to include the
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’s worth mentioning that there are numerous customization possibilities available for this Owl Carousel code snippet. These consist of the items’ size, quantity, and autoplay. This code snippet will display the maximum number of items at four, filling the entire width of the page.
In order to improve the clarity of the images on smaller screens, fewer items will be displayed. Three images would be displayed on a medium screen and only one on a mobile device. Adjust these configurations according to your tastes. For any website, a banner slider or an Owl Carousel in Magento 2 are both fantastic design options.
Jacker is the Chief Technology Officer (CTO) at Mageplaza, bringing over 10 years of experience in Magento, Shopify, and other eCommerce platforms. With deep technical expertise, he has led numerous successful projects, optimizing and scaling online stores for global brands. Beyond his work in eCommerce development, he is passionate about running and swimming.
Related Post
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
Holiday Marketing Hacks 2025 - How to Boost Sales for Magento 2 Stores? - Mageplaza
Discover the best 2025 holiday marketing strategies for Magento 2. Learn key trends, creative campaign ideas, and expert tips to increase seasonal sales.
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
Holiday Marketing Hacks 2025 - How to Boost Sales for Magento 2 Stores? - Mageplaza
Discover the best 2025 holiday marketing strategies for Magento 2. Learn key trends, creative campaign ideas, and expert tips to increase seasonal sales.