How to call Owl Slider in Magento2

Question

If we want to add Owl Slider in Magento 1.X then we follow the below steps.

Copy owl.carousel.min.js and owl.carousel.js and paste into skin/frontend/pakage_name/theme_name/js
Copy owl.carousel.css and paste into skin/frontend/pakage_name/theme_name/css
Goto app/design/frontend/pakage_name/theme_name/layout/page.xml and call js and CSS

And we can use Owl Slider anywhere in Magento 1.X site.

So in Magento 2 how we can call Owl slider and it should be called everywhere in the site so I can use whenever I want.

For this problem, I have referred this link but it's not up to the mark and it's not working.

Right now I have placed Owl slider js in app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js but it's not working.

Any help would be appreciated.

We also can follow this guide: boolfly.com/magento-2-slider-with-owl-carousel — Khoa TruongDinh, Commented Jul 7, 2016 at 14:58

medmek · Accepted Answer · 2019-10-24 10:23:16Z

You have to created one requirejs-config.js file inside your theme like,

First Add owlcarousel.js file inside,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js

Add your css inside,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css

call css inside your tempalte file using,

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">

or call css inside a layout file (best practice), depending on your needs :

whole site : default.xml for example app/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
Home page : cms_index_index.xml

<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

Now create requirejs-config.js file

Magento_Catalog/requirejs-config.js

Define your slider,

var config = {
    paths: {            
            'owlcarousel': "Magento_Catalog/js/owlcarousel"
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

Now you can use owlcarousel under any phtml file,

<div id="owlslider" class="products list items product-items">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>       
  </ul>
</div>
    <script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $("#owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
    </script>

Remove pub/static folder content and run php bin/magento setup:static-content:deploy command.

but where can I add css? and I need to add css in require.js file?? — Dhaval, Commented Jul 1, 2016 at 5:52
I have 3 owl slider files owl.carousel.css , owl.carousel.js,owl.carousel.min and need to add this all files so where can I add and call these all files so I can use in whole magento site wherever I want? — Dhaval, Commented Jul 1, 2016 at 5:53
app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css — Rakesh Jesadiya, Commented Jul 1, 2016 at 5:54

medmek · Accepted Answer · 2019-10-24 10:23:19Z

first you need to put slider at,

Step1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Step2 Do mapping for the file in themename/themename/Magento_Theme/requirejs-config.js

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Step3 : I have used in bestseller file as below where you need to include slider mapping, themename/themename/Magento_Catalog/templates/product/bestseller_list.phtml:

<script>

    require([
        'jquery',
        'owlcarouselslider'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery("#best-seller-carousel").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:5,
                items : 5,
                itemsDesktop : [1199,5],
                itemsDesktopSmall : [979,5],
                itemsTablet : [768,5],
                navigation : true,
                pagination : false
          });
    });
</script>

Step4 : For that structure should be as below,

<div id="demo">
<div id="best-seller-carousel">
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
    <div class="item"><h1>7</h1></div>
    <div class="item"><h1>8</h1></div>
</div>
</div>

You can also visit more links @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/

I have call owl slider js in requirejs-config.js but my js is not showing in frontend. Do you have any idea? — Dhaval, Commented Jul 1, 2016 at 10:33
@watson Remove pub/static folder content and run php bin/magento setup:static-content:deploy command. — Rushvi, Commented Jul 1, 2016 at 10:39

Victor S. · Accepted Answer · 2021-04-15 14:00:38Z

If you want to add owl carousel in Magento 2 way, you should follow these steps.

Copy owl.carousel.js to app/design/frontend/<vendor_name>/<theme_name>/web/js/owl-carousel/.

Add your requirejs module app/design/frontend/<vendor_name>/<theme_name>/web/js/carousel.js.

 define([
     'jquery',
     'owlCarousel'
 ], function($) {
     return function(config, element) {
         $(element).owlCarousel(config);
     };
 });

Add requirejs config to app/design/frontend/<vendor_name>/<theme_name>/requirejs-config.js.

 var config = {
     map: {
         '*': {
             'carousel': 'js/carousel',
             'owlCarousel': 'js/owl-carousel/owl.carousel'
         }
     }
 };

How to use:

use the data-mage-init attribute to insert Owl Carousel in a certain element:

 <div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'>
     <div class="item">Item 1</div>
     ...
     <div class="item">Item n</div>
 </div>

use with <script type="text/x-magento-init" />:

 <div id="owl-carousel" class="owl-carousel">
     <div class="item">Item 1</div>
     ...
     <div class="item">Item n</div>
 </div>

 <script type="text/x-magento-init">
 {
     "#owl-carousel": {
         "carousel": {"option": value}
     }
 }
 </script>

This is not a relevant question. This example shows how to use Owl Carousel in Magento way approach with data-mage-init or text/x-magento-init — Volodymyr Lisniak, Commented Dec 9, 2020 at 15:29

shires-boy · Accepted Answer · 2017-02-25 15:33:58Z

The other 2 answers are excellent, and I have copied elements of both, but I was occasionally finding issues with error messages "$ is not a function" and "Cannot read property 'fn' of undefined". Also I wanted a method centred on the content pages.

So this combined method might help somebody

Copy owl.carousel.js into app/design/frontend/vendorname/themename/Magento_Theme/web/js

(create directory if not already there)

The other css solution could work just as well, or you could copy owl.carousel.css and owl.theme.default.css into the .Less file for the theme, and adjust styling to your preferences.
Copy the following code into app/design/frontend/vendorname/themename/Magento_Theme/require-config.js

(create file / directory if necessary, this code appears to solve the "cannot read property of FN" issue.)

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

In the page content place the following code to define the carousel images

<div class="owl-carousel owl-theme">
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
</div>

After the above code, add the following code for the carousel (this appears to solve the "$ is not a function" error )

<script>
    require([
        'jquery',
        'owlcarousel'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery(".owl-carousel").owlCarousel({
                    nav: true, // Show next and prev buttons
                    navText:["<",">"], //show prev next
                    loop: true,
                    autoplay: true, //Set AutoPlay  
                    autoplayHoverPause: true, //stop when mouse on carousel
                    items : 1
          });
    });
</script>

Deploy the static content, e.g. php magento setup:static-content:deploy (note there are various methods for doing this which involve the manual clearing of cache folders and a php magento cache:clean command).
Check it out on the website

i tried but slider is not coming. although when i inspect element owl class does get added to the div — surbhi agr, Commented Sep 23, 2019 at 8:16

claudimards · Accepted Answer · 2021-06-04 00:29:24Z

I'm new at magento 2, and had same challenge.. after hours and hours of searching, what worked for me was..

1 - Download owl-carousel2 js source code to app/design/frontend/VendorName/ThemeName/web/js/owl-carousel/owlcarousel.js

2 - Add jquery 3.x source code at (because owl-carousel2 compability) app/design/frontend/VendorName/ThemeName/web/js/jquery-custom.js

3 - Add in requirejs-config.js at app/design/frontend/VendorName/ThemeName/requirejs-config.js

map: {
    "*": {
        "<themeName>/jquery": "js/jquery-custom",
        owlcarousel: "js/owl-carousel/owlcarousel",
        main_custom: "js/main-custom.js",
    },
    shim: {
        owlcarousel: {
            deps: "<themeName>/jquery",
        },
    },
},

4 - Then in my main-custom.js at app/design/frontend/VendorName/ThemeName/web/js/main-custom.js (or anywhere else you want to use)

require(["jquery", "beleaf/jquery", "owlcarousel"], function ($) { $(document).ready(function () { $(".main-banner.owl-carousel").owlCarousel({ nav: true, navText: [ "<", ">", ], autoplay: true, autoplayHoverPause: true, items: 1, }); }); });

Obs.: If any files of those exists in your project, then just create them.

Hope it helps buddys.

Teja Bhagavan Kollepara · Accepted Answer · 2017-07-22 07:37:12Z

-1

define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

You should add owl.carousel.min.js on magento2

edited Jul 22, 2017 at 7:37

Teja Bhagavan Kollepara

3,8275 gold badges32 silver badges69 bronze badges

answered Jul 22, 2017 at 7:34

Prakash

1

Add a comment |

Stack Exchange Network

How to call Owl Slider in Magento2

6 Answers 6

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
theme
magento-2.0.7
slider
or ask your own question.

Linked

Hot Network Questions

How to call Owl Slider in Magento2

6 Answers 6

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascriptthememagento-2.0.7slider or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
theme
magento-2.0.7
slider
or ask your own question.