9

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

  1. Copy owl.carousel.min.js and owl.carousel.js and paste into skin/frontend/pakage_name/theme_name/js
  2. Copy owl.carousel.css and paste into skin/frontend/pakage_name/theme_name/css
  3. 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 call everywhere in site so I can use whenever I want.

For my this problem I have refer 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.

8

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')?>">

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 Jul 1 '16 at 5:52
  • you cant add css into require.js file – Rakesh Jesadiya Jul 1 '16 at 5:53
  • 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 Jul 1 '16 at 5:53
  • app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css – Rakesh Jesadiya Jul 1 '16 at 5:54
  • i have updatead answer plz check – Rakesh Jesadiya Jul 1 '16 at 5:55
9

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="owl-demo" class="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/

  • Anytime. Glad to know it worked for you :) – Rushvi Jul 1 '16 at 6:03
  • Are you from ahmedabad? – Dhaval Jul 1 '16 at 6:05
  • I have call owl slider js in requirejs-config.js but my js is not showing in frontend. Do you have any idea? – Dhaval Jul 1 '16 at 10:33
  • @watson Remove pub/static folder content and run php bin/magento setup:static-content:deploy command. – Rushvi Jul 1 '16 at 10:39
  • I do it so many times but didn't work it. – Dhaval Jul 1 '16 at 10:42
3

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

  1. Copy owl.carousel.js to app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.
  2. Add your requirejs module app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

    define([
        'jquery',
        'owlCarousel'
    ], function($) {
        return function(config, element) {
            $(element).owlCarousel(config);
        };
    });
    
  3. Add requirejs config to app/design/frontend/<pakage_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>
    
0

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

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

(create directory if not already there)

  1. 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.
  2. 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']
    }
}
};
  1. 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>  
    
  2. 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>
    
  3. 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).

  4. 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 Sep 23 at 8:16
-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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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