1

I'm trying to use materialize slider in my custom module, my try was:

Vendor/Module_Name/view/requirejs-config.js:

var config = {
map: {
    '*': {
        materialize: 'SliderHome/js/materialize'
    }
}};

materialize.js file is in Vendor/Module_Name/view/web/js/materialize.js

then in my template view (.phtml file) I put at the end this script:

<script type="text/javascript">

require(['jquery', 'materialize'], function ($) {

$(function () {
    var height = setHeightSlider();
    var buttonHeight = 40;
    $('.slider-arrow').css('top', (height/2)-(buttonHeight/2));
    $('.slider').slider({
        indicators: false,
        height: height,
        interval: 10000
    });

    $('#prev-photo').click(function () {
        $('.slider').slider('prev');
    });
    $('#next-photo').click(function () {
        $('.slider').slider('next');
    });
});

function setHeightSlider() {
    var width = $(window).width();
    var height = 550;
    if (width > 1824) {
        // larger screens

        height = 700;
    } else if (width > 1224 && width < 1824) {
        // Desktops and laptops

        height = 500;
    } else if (width < 1224) {
        // tablet

        height = 350;
    }
    return height;
} });</script>

When the page is loaded I get this error:

Error: Script error for: materialize

Can anyone help me? Thanks

2

You need to place both your requirejs and js file in a scope folder, either adminhtml, frontend or base, inside the view folder.

Depending on wether you need it in the admin, frontend or in both.

When done check the require js file included in the head if it contains your config.

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.