0

This question already has an answer here:

I have tried to implement owl carousel slider in custom module followed How to call Owl Slider in Magento2

my phtml file

<div class="products list items product-items owlslider">
   <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>

app/code/vendor/modulename/view/frontend/web/js/require-config.js

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

I am getting script error Uncaught Error: Script error for: owlcarousel

marked as duplicate by Rohan Hapani, Siarhey Uchukhlebau, Priyank, Piyush, Sukumar Gorai Oct 12 '18 at 14:43

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1

Instead of writing inline script, it is better to do it using js component as follows:

Code in phtml file

<div class="products list items product-items">
   <ul id="owlslider">
     <li><img src="some image" /></li>
     <li><img src="some image" /></li>
     <li><img src="some image" /></li>      
  </ul>
</div>
<script type="text/x-magento-init">
    {
        "#owlslider": {
            "carousel": {
                    "navigation" : true,
                    "center": true,
                    "margin":10,
                    "responsiveClass":true,
                    "responsive":{
                        "0":{
                            "items":1,
                            "nav":true
                        },
                        "600":{
                            "items":2,
                            "nav":true
                        },
                        "1000":{
                            "items":3,
                            "nav":true
                        }
                    }
                }
        }
    }
    </script>

Code in requirejs-config.js

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

Then, I have placed carousel.js and owl.carousel.min.js in web/js in my module.

code in carousel.js

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

You can modify the code and carousel configuration according to your requirement.

  • not work for me magento 2.3 – matinict Mar 8 at 11:28
  • @Anshu "margin":10 parameter not working here – Hitesh Balpande May 21 at 6:48
  • 1
    @matinict did you find any solution? – surbhi agr Sep 24 at 13:04
  • @surbhiagr i implemented codepen.io/vilcu/pen/ZQwdGQ you may try if face problem inform me – matinict Sep 25 at 4:29
  • @matinict I have tried adding all these code in a phtml file but the images doesnt slide and slider is not coming. Can you please help – surbhi agr Sep 30 at 7:09

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