0

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();
    });
 });
Improve this question
2
  • Please check it and update me.
    – Msquare
    Dec 17, 2020 at 4:27
  • @Jayreis - Use js/owlcarousel.min to VendoreName_ModuleName/js/owlcarousel.min and same for js/custom.js toVendoreName_ModuleName /js/custom.js and for css too in xml
    – Nilesh Dubey
    Dec 17, 2020 at 15:06

4 Answers 4

Reset to default
0
+50

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
Improve this answer
1

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

Improve this answer
0

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();
    });  });
Improve this answer
0

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

Improve this answer

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.