How to Add Owl Carousel Slide into Magento 2

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.

Step 1: Download and add the CSS and JS files to your website

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:


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:

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```

## Step 2: Include the required carousel module on the config file:

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']

}

}

};

## Step 3: Include the Slider Block on your page:

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>

This has now called the carousel to appear and added a block to your website.

## Step 4: Include the RequireJS module

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 <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’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.

Vinh Jacker

Hello, I'm the Chief Technology Officer of Mageplaza, and I am thrilled to share my story with you. My deep love and passion for technology have fueled my journey as a professional coder and an ultra-marathon runner. Over the past decade, I have accumulated extensive experience and honed my expertise in PHP development.

Website Support
& Maintenance Services

Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.

Get Started