1

Issue

Slick slider breaking/not loading properly on page load and eventually breaking the product slider

Solution:

Load slick slider script after entire document is loaded and parsed

domReady! vs domReady

  • If you include it in the the requirements array w/a trailing ! your module won't execute until it's "safe" to interact w/ the DOM.
  • If you omit the !, then it's just a normal module that happens to be a function, which can take a callback that won't execute before
    the DOM is safe to interact with.

Reference - http://requirejs.org/docs/api.html#pageload

Using below script for domReady!

slider: function () {
    require([
        'jquery',
        'domReady!',
        'slider'
    ], function ($, slider) {

        slider({"class": "slick-slider-recently-viewed", "number": 4, "tablet": 3, "landscape": 2, "portrait": 1});
        slider({"class": "slick-slider-recommended", "number": 4, "tablet": 3, "landscape": 2, "portrait": 1});

    });
}

Exception - Uncaught TypeError: slider is not a function

Tried below using domReady and it is working

slider: function () {
    require([
        'jquery',
        'domReady',
        'slider'
    ], function ($, domReady, slider) {

        domReady(function () {

        slider({"class": "slick-slider-recently-viewed", "number": 4, "tablet": 3, "landscape": 2, "portrait": 1});
        slider({"class": "slick-slider-recommended", "number": 4, "tablet": 3, "landscape": 2, "portrait": 1});

        });
    });
}

How do I use domReady! instead of domReady ? What I understand is domReady is not a method but a RequireJS module.

Do I have to use in define instead of require like below as used in \vendor\magento\module-admin-notification\view\adminhtml\web\toolbar_entry.js

define([
    "jquery",
    "jquery/ui",
    "domReady!"
], function ($) {
    'use strict';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.