---
title: "How to add owl carousel slider in Magento 2"
url: "https://dolphinwebsolution.com/how-to-add-owl-carousel-slider-in-magento-2"
date: "2022-05-26T08:39:02+05:30"
modified: "2023-08-31T05:04:35+05:30"
author:
name: "Prashant Dhaduk"
categories:
- "Blog"
- "Magento"
word_count: 713
reading_time: "4 min read"
summary: "In this article. we will explain how to add an owl carousel slider in Magento 2.
Owl carousel is a popular product list slider plugin. It can be added to your most popular product slider, featur..."
description: "In this article. we will explain how to add an owl carousel slider in Magento 2. Owl carousel is a popular product list slider plugin. It can be added to you..."
keywords: "owl carousel slider,Magento 2, Blog, Magento"
language: "en"
schema_type: "Article"
related_posts:
- title: "How To Setup Cron Time In Magento 2 System Configuration"
url: "https://dolphinwebsolution.com/how-to-setup-cron-time-in-magento-2-system-configuration"
- title: "Get All Payment Methods in Magento 2"
url: "https://dolphinwebsolution.com/get-all-payment-methods-in-magento-2"
- title: "How to add/remove column and other DB operations to table in Magento 2.3 using declarative schema?"
url: "https://dolphinwebsolution.com/how-to-add-remove-column-and-other-db-operations-to-table-in-magento-2-3-using-declarative-schema"
---
# How to add owl carousel slider in Magento 2
_Published: May 26, 2022_
_Author: Prashant Dhaduk_
In this article. we will explain how to add an owl carousel slider in Magento 2.
Owl carousel is a popular product list slider plugin. It can be added to your most popular product slider, featured product slider, and so on.
Now, we will start to learn step-by-step. [**Hire Magento 2 developers**](https://dolphinwebsolution.com/hire-magento-2-developers/) from Dolphin Web Solution.
**Step 1:** Go to the following URL to get the latest Owl carousel CSS and JS file and put it into the below path:
[https://owlcarousel2.github.io/OwlCarousel2/](https://owlcarousel2.github.io/OwlCarousel2/)
Add CSS under **app/design/frontend/Dolphin/custom/web/css** folder
Add JS under **app/design/frontend/Dolphin/custom/web/js** folder
**Step 2:** Now Create a static block or phtml file in your [custom theme](https://dolphinwebsolution.com/how-to-create-a-custom-theme-in-magento-2). And Now you must insert the following code in **app/design/frontend/Dolphin/custom/Magento\_Theme/templates/slider.phtml** file.
```
```
**Step 3:** Then, you need to call the owl carousel CSS file at **app/design/frontend/Dolphin/custom/Magento\_Theme/layout/default\_head\_blocks.xml** and put the below code:
```
```
**Step 4:** Then, you need to insert the owl js code in the **app/design/frontend/Dolphin/custom/web/js/custom.js** file.
```
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
}
}
});
});
});
```
**Step 5:** Now You must configure the slider.phtml files in the **app/design/frontend/Dolphin/custom/Magento\_Theme/layout/cms\_index\_index.xml** layout file. This slider calls into the home page. If you want to put the slider into other pages or layout files then put the below code into your layout file.
```
```
**Step 6:** Create the **requirejs-config.js** file at **app/design/frontend/Dolphin/custom** and insert the below code to configure your carousel javascript using the requirejs-config.js file.
```
var config = {
"deps": [
"js/custom"
],
paths: {
'owlcarousel': 'js/owl.carousel.min'
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};
```
**Note:** “requirejs-config.js” is the file in which we add all configurations. Just read the Magento doc below link you will get more clarity.
[https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/requirejs.html](https://developer.adobe.com/commerce/frontend-core/javascript/requirejs/)
**Result:**
After you implement the above code, check the output to the owl carousel slider shown on the home page.
**That’s it!**
I hope this technical blog will help you to find what you were looking for.
If you have any further questions about Magento 2 theme development or if need any help from our Magento 2 expert, contact us now for a free consultation.
**Bookmark** it for your future reference. Do comment below if you have any other questions.
**P.S.** Do share this note with your team.