cancel
Showing results for 
Search instead for 
Did you mean: 

Magento2 Owl Carousel not working perfectly

Magento2 Owl Carousel not working perfectly

 
I am adding the slides in owl carousel dyamically but It is not working fine when I try to remove them some of the properties of owl carousel won't work at all like margin, lazload nav etc , although when I refresh the page it comes up the desired content but not working fine when i try to add / remove slide dynamically

 

Screenshot from 2022-08-04 15-40-06.png

 

When I click on Cross Icon margin not working also nav is not showing unless i refresh the page I have tried owl.refresh etc but didm't work for me.

Any help, Thanks in advance.

3 REPLIES 3

Re: Magento2 Owl Carousel not working perfectly

Hi @hassanzami1061,

Greetings!

It seems there is a problem in js and because of some issues, it seems some CSS and Js not loading.
kindly check in the network
1.Add owl.carousel.min in your theme web/js/owl carousel/ and add below require js in app/design/frontend/your/theme/theme_name/requirejs-config.js
requires-config.js 

var config = {
  map: {
        "*": {
            "owlslider" : "js/owlcarousel/owl.carousel.min"
        }
    },
    paths:  {
        "owlslider" : "js/owlcarousel/owl.carousel.min",
    }
};

2. Deploy your static content properly.
now use the RequireJs function like below in your phtml.

<script>
    require([
        'jquery',
        'owlslider'
        ], function ($) {
            'use strict';
            $("#daily-products").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:,
                items : ,
                itemsDesktop :,
                itemsDesktopSmall : ,
                itemsTablet :,
                itemsMobile :,
                navigation : ,
                pagination : 
          });
    });
</script>

Lastly, check in your network required js is loading, or else check in the source file.

 

Hope this will help you to solve your issue. 

Let us know if you face any errors. 

 

Solved? Click KUDOS and accept it as a solution.

Thank you!

Re: Magento2 Owl Carousel not working perfectly

I am also facing following JS issue

 

Uncaught TypeError: $(...).find(...).andSelf is not a function

 

2022-08-06_15-26.png

Re: Magento2 Owl Carousel not working perfectly

Quick Fix: Please update in your owl.caorusel.min.js file, just replace the word "andSelf" with "addBack", and it will work.