How to add owl Carousel in magento 2 store

How to add owl carousel slider in Magento 2 ?

/ Magento Tutorial / By

Owl Carousel is one of the popular carousel for product slider and to display product carousel. Adding owl carousel slider in Magento 2 is fairly easy. To add owl carousel in magento 2 first download latest version from owl carousel’s official site https://owlcarousel2.github.io/OwlCarousel2/

After downloading unzip and locate folder OwlCarousel2-2.3.4/dist/ and copy following files and place it somewhere for further use

OwlCarousel2-2.3.4/dist/owl.carousel.min.js
OwlCarousel2-2.3.4/dist/assets/owl.carousel.css
OwlCarousel2-2.3.4/dist/assets/owl.theme.default.css

Now to add Carousel slider in your magento 2 store you need to follow below steps

Six steps

Step 1)

Copy owl.carousel.css and owl.theme.default.css files in following folder app/design/frontend/[theme_vendor]/[theme_name]/Magento_Theme/web/css/

Copy owl.carousel.min.js file in following folder app/design/frontend/[theme_vendor]/[theme_name]/Magento_Theme/web/js/

Dont forget to replace [theme_vendor] and [theme_name] to your theme vendor and theme name, you are using on your store. If you are using magento 2 default theme like luma, you just need to put above css and js files in below location

vendor/magento/theme-frontend-luma/Magento_Theme/web/css
vendor/magento/theme-frontend-luma/Magento_Theme/web/js

Step 2)

In step 2, we will tell magento 2 to use above css and js files. To do copy Magento_Theme/layout/default_head_blocks.xml from your theme and add following code in the head section

 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Magento_Theme::css/owl.carousel.css" />
        <css src="Magento_Theme::css/owl.theme.default.css" />
        <script src="Magento_Theme::js/owl.carousel.min.js"/>
     </head>
</page>

 

Step 3)

Upload required  images in media folder

app/design/frontend/[theme_vendor]/[theme_name]/media/images/

In case of luma theme

vendor/magento/theme-frontend-luma/media/images/

Step 4)

Create a template file name app/design/frontend/[theme_vendor]/[theme_name]/Magento_Theme/templates/owlcarousel.phtml in your theme folder

in case of luma theme vendor/magento/theme-frontend-luma/templates/owlcarousel.phtml

add put following code in it

<div class="owlcarousel">
    <div class="owl-carousel owl-theme">
        <div class="item">
            <img src="<?= /* @escapeNotVerified */  $block->getViewFileUrl('images/Main-Banner1.png'); ?>" />
        </div>
        <div class="item">
            <img src="<?= /* @escapeNotVerified */  $block->getViewFileUrl('images/Main-Banner2.png'); ?>" />
        </div>
    </div>

</div>

<script type="text/javascript">
    require([
        'jquery',
        'owlcarousel'
    ], function($){
        
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            autoplay:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:4
                }
            }
        });
    

    });
</script>

 

Step 5)

Login to admin and add below code in any page where you want owl carousel to be displayed in your magento 2 site.

{{block class=”Magento\Framework\View\Element\Template” block_id=”owl.carousel” template=”Magento_Theme::owlcarousel.phtml”}}

Step 6)

Last step is Configuring requirejs. For this create a requirejs-config  like below

app/design/frontend/[theme_vendor]/[theme_name]/Magento_Theme/requirejs-config.js in your theme folder

in case of luma theme vendor/magento/theme-frontend-luma/Magento_theme/requirejs-config.js

Add following code in this file

var config = {
    paths: {
        owlcarousel: "Magento_Theme/js/owl.carousel.min"
    },
    shim: {
        owlcarousel: {
            deps: ['jquery']
        }
    }
};

These steps will add carousel or slider in any page of your magento 2 store. After doing above steps, run below command in your server terminal

php bin/magento setup:upgrade

php bin/magento cache:flush 

Refresh your browser and you will see owl carousel running on your website.

Step 7) (Optional )

Sometimes on some magento 2 stores when using owl carousel it throws jquery error like below Uncaught TypeError: $(…).owlCarousel is not a function

To fix this error, open your owl.carousel.min.js file in editor and add this code before any owl carousel code

require([‘jquery’], function($) {

after owl carousel code write end tag like below

});

In short you need to add whole owl.carousel.min.js code in between this require js code

require([‘jquery’], function($) {

—here will go all the codes of the file —

});

Replace this updated file owl.carousel.min.js with old file in your theme. Refresh magento cache and browser cache. This will surely fix the jQuery error.

I hope you will you try and enjoy owl carousel on your magento 2 store.

 

Scroll to Top