Owl Carousel randomly not loading magento2.4

magento.stackexchange https://magento.stackexchange.com/questions/327822

  •  15-04-2021
  •  | 
  •  

Question

on my Magento2.4 I have an issue where owl-carousel will randomly not load.

Here is my default_head_blocks.xml

<?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>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" type="text/css" src="https://fonts.googleapis.com/css?family=Roboto+Slab%3A400%2C700%7CCinzel%3A400%2C700%7COswald%3A400%2C500%2C600%2C700&#038;subset=latin%2Clatin-ext&#038;ver=5.5" src_type="url" /> 
    <font src="fonts/Luma-Icons.woff2"/>
    <css src="css/bootstrap.min.css"/>
    <css src="css/owl.carousel.min.css"/>
    <css src="css/custom.css" media="all"/>
    <link src="js/custom.js"/>

    <!-- MailMunch.com code -->
    <script src="//a.mailmunch.co/app/v1/site.js" id="mailmunch-script" data-mailmunch-site-id="431303" async="async" src_type="url"></script>
</head>

and here is my custom.js file

require(['jquery','js/owlcarousel.min'], 
  function($){
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop:true,
            nav:false,
            items:1,
            dots:true,
            autoplay:true,
            autoplayTimeout:3000
        })

        $(".homepagevid").hide();
        $('.homepagevidclick').click(function () 
        {
           $('.homepagevid').show();
           $('.homepagevid').attr('src', 'https://player.vimeo.com/video/379262940?autoplay=1');
           $('.homepagevidclick').hide();
           $('.fa.fa-play-circle').hide();
        });
        $('.cms-home .fa.fa-play-circle').click(function () 
        {
           $('.homepagevid').show();
           $('.homepagevid').attr('src', 'https://player.vimeo.com/video/379262940?autoplay=1');
           $('.homepagevidclick').hide();
           $('.fa.fa-play-circle').hide();
        });

        $(".action.subscribe.primary").click( function() {
            $(window).scrollTop(0);
        });

        $(".messages").fadeOut("slow");

        function startAnimations() {
        $("#toplefttxtscroller li").hide();

          function loop() {
              var $li = $("#toplefttxtscroller li:first-child").fadeIn(3000, function () {
                  $li.fadeOut(400, function () {
                      $li.appendTo('#toplefttxtscroller');
                      loop()
                  })
              });
          }
          loop()
        }
        startAnimations();
    });
 });
Was it helpful?

Solution

create the requirejs-config.js in your theme below path,

path : app/design/frontend/[theme_name]

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

and add the owl.carousel.min.js in path : app/design/frontend/[theme_name]/web/js

add the Your custom.js in below path,

path : app/design/frontend/[theme_name]/web/js

require(['jquery','owl'], 
  function($){
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop:true,
            nav:false,
            items:1,
            dots:true,
            autoplay:true,
            autoplayTimeout:3000
        })

        $(".homepagevid").hide();
        $('.homepagevidclick').click(function () 
        {
           $('.homepagevid').show();
           $('.homepagevid').attr('src', 'https://player.vimeo.com/video/379262940?autoplay=1');
           $('.homepagevidclick').hide();
           $('.fa.fa-play-circle').hide();
        });
        $('.cms-home .fa.fa-play-circle').click(function () 
        {
           $('.homepagevid').show();
           $('.homepagevid').attr('src', 'https://player.vimeo.com/video/379262940?autoplay=1');
           $('.homepagevidclick').hide();
           $('.fa.fa-play-circle').hide();
        });

        $(".action.subscribe.primary").click( function() {
            $(window).scrollTop(0);
        });

        $(".messages").fadeOut("slow");

        function startAnimations() {
        $("#toplefttxtscroller li").hide();

          function loop() {
              var $li = $("#toplefttxtscroller li:first-child").fadeIn(3000, function () {
                  $li.fadeOut(400, function () {
                      $li.appendTo('#toplefttxtscroller');
                      loop()
                  })
              });
          }
          loop()
        }
        startAnimations();
    });
 });

After run the below commnds,

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:f

OTHER TIPS

I have same problem with owl carousel slider Js. sometime js load and sometime show error. So at that time i found many solutions. And at last i found solution which is works well. There are two ways to include Js from the template in Magento 2:

  1. <script type="text/x-magento-init">
  1. data-mage-init attribute.

Either way can be used to pass data to the script within the json definition.

app/code/VendoreName/ModuleName/view/frontend

requirejs-config.js

var config = {
    map: {
        '*':{
                owlcarousel:'VendoreName_ModuleName/js/owlcarousel',
                reltaed_js:'VendoreName_ModuleName/js/reltaed_js',
            }
        },
    shim:{
            'owlcarousel':{
                                 deps: ['jquery']
                          },
            'reltaed_js':{
                                 deps: ['jquery']
                          }
        }
};
  1. For example, using the x-magento-init script tag, in the template you have:
<script type="text/x-magento-init">
    {
        "*": {
            "VendoreName_ModuleName/js/reltaed_js": {
                "slidername": "#you_id",
                "slideritems": "4"
            }
        }
    }
</script>
  1. For example, using the data-mage-init attribute into tag, in the template you have:
<div data-mage-init='{"reltaed_js": { "slidername": "Param1"}}'>

app/code/VendoreName/ModuleName/view/frontend/web/js

reltaed_js.js

define([
    'jquery',
    'domReady',
    "owlcarousel",
], function ($,dom,owlCarousel) {
    'use strict';

    return function(config) {
        $(config.slidername).owlCarousel({
            items: config.slideritems,
            margin: 10,
            lazyLoad: true,
            autoplayHoverPause: true,
            autoplay: true,
            nav: true,
            dots:true,
            loop:true,
            slideSpeed: 300,
            paginationSpeed: 400,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                    nav: true
                },
                480: {
                    items: 2,
                    nav: true
                },
                770: {
                    items: 3,
                    nav: true
                },
                1024: {
                    items: config.slideritems,
                    nav: true
                }
            }
        });
    }
});

Add owl js at app/code/VendoreName/ModuleName/view/frontend/web/js/owlcarousel.js Rename owlcarousel.min.js to owlcarousel.js

Add Owl CSS into your layout like this

<head>
    <css src="VendoreName_ModuleName::css/owl.carousel.min.css" />
    <css src="VendoreName_ModuleName::css/owl.theme.default.css" />
</head>

Note: I recommend to use x-magento-init script tag

I Hope This Helps You

Try it.

require(['jquery','Vendor_ModuleName/js/owlcarousel.min'],    function($, owl){
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop:true,
            nav:false,
            items:1,
            dots:true,
            autoplay:true,
            autoplayTimeout:3000
        })

        $(".homepagevid").hide();
        $('.homepagevidclick').click(function () 
        {
           $('.homepagevid').show();
           $('.homepagevid').attr('src', 'https://player.vimeo.com/video/379262940?autoplay=1');
           $('.homepagevidclick').hide();
           $('.fa.fa-play-circle').hide();
        });
        $('.cms-home .fa.fa-play-circle').click(function () 
        {
           $('.homepagevid').show();
           $('.homepagevid').attr('src', 'https://player.vimeo.com/video/379262940?autoplay=1');
           $('.homepagevidclick').hide();
           $('.fa.fa-play-circle').hide();
        });

        $(".action.subscribe.primary").click( function() {
            $(window).scrollTop(0);
        });

        $(".messages").fadeOut("slow");

        function startAnimations() {
        $("#toplefttxtscroller li").hide();

          function loop() {
              var $li = $("#toplefttxtscroller li:first-child").fadeIn(3000, function () {
                  $li.fadeOut(400, function () {
                      $li.appendTo('#toplefttxtscroller');
                      loop()
                  })
              });
          }
          loop()
        }
        startAnimations();
    });  });

We had similar issue where OWL carousel was not loading randomly. In our case it was because we had other slider using owl carousel which was using the different version of owl-carousel js. Please check if you have multiple slider using two different version of owl-carousel. Make sure to use the same version of owl-carousel

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top