Owl Carousel randomly not loading magento2.4

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

  •  15-04-2021
  •  | 
  •  

Domanda

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();
    });
 });
È stato utile?

Soluzione

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

Altri suggerimenti

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a magento.stackexchange
scroll top