6

In Magento 1 I include js and css like this:

<action method="addJs"><script>lib/jquery/masterslider.min.js</script></action>
<action method="addCss"><stylesheet>css/masterslider.css</stylesheet></action>

But in Magento 2 this not works.

How correct add masterslider.min.js and masterslider.css to Magento 2 (slider for home page)? This html insert to home page (admin-panel):

<div class="master-slider ms-skin-default" id="masterslider">

    <div class="ms-slide" data-delay="10">

        <img src="media/blank.gif" data-src="media/001.jpg" alt="Test slide"/>     

    </div>

</div>

<script>
    jQuery(function($){
    var slider = new MasterSlider();
    slider.setup('masterslider' , {
        width:1200,
        height:600,
        space:0,
        autoplay:true,
        loop:true,
        speed:8,
        view:"fade"
    });
    slider.control('arrows');
    });
</script>
  • For a long time I am looking for a solution. Has anyone had experience of connecting the slider to the home page? – Sylon Dec 23 '16 at 5:12
5

This is correct way!

  1. Path: app/design/frontend/My-vendor/my-name-theme/web
  2. Add masterslider.min.js to app/design/frontend/My-vendor/my-name-theme/web/js
  3. Create requirejs-config.js to app/design/frontend/My-vendor/my-name-theme

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

  4. Add masterslider.css to app/design/frontend/My-vendor/my-name-theme/web/css/source

  5. Use or create file _extend.less to app/design/frontend/My-vendor/my-name-theme/web/css/source Write in _extend.less this in the last row: @import 'masterslider.css';

  6. cd /var/www/domain/html rm -rf pub/static/* rm -rf var/view_preprocessed/* php /var/www/domain/html/bin/magento cache:clean php /var/www/domain/html/bin/magento setup:static-content:deploy en_US ru_RU php /var/www/domain/html/bin/magento cache:clean

  7. Call slider in content home page or in file phtml like this:

<script>

    require([
        'jquery',
        'masterslider'
    ], function($) {
        jQuery(document).ready(function() {
            jQuery('#masterslider').show().masterslider({
            /* code slider */
            });
        });
    });

</script>
  • from which place i need to copy masterslider.min.js or it is already available in magento 2 default themes – Hitesh Balpande Nov 5 '18 at 9:17
5

Add css and js from your frontend layout file

You need to add below code in app/code/Vendor/Modulename/frontend/layout/routname_controllername_action.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Modulename::js/your-js.js"/>
        <css src="Vendor_Modulename::css/your-css.css"/>
    </head>
    <body>
    </body>
</page>

Your js and css path will be

app/code/Vendor/Modulename/frontend/web/css/your-css.css app/code/Vendor/Modulename/frontend/web/js/your-js.js

  • The code I need to write to a file app/code/Vendor/Modulename/frontend/requirejs-config.js? – Sylon Dec 21 '16 at 11:58
  • Updated answer with file path please check it – Prashant Valanda Dec 21 '16 at 12:00
  • Do I make the command setup:upgrade after? – Sylon Dec 21 '16 at 12:05
  • No you do not need that command if cache enable the run php bin/magento cache:flush and after that php bin/magento setup:static-content:deploy – Prashant Valanda Dec 21 '16 at 12:27
  • I try, but not works on home page... – Sylon Dec 23 '16 at 3:35
0

You can add below code in you custom theme app\design\frontend\<vendor>\<theme>\Magento_Theme\layout\cms_index_index.xml\ file.

<?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>
       <script src="js/your-js.js"/>
       <css src="css/your-css.css"/>
    </head>
    <body>              
    </body>
</page>

And you can add this file in app\design\frontend\<vendor>\<theme>\web\css and app\design\frontend\<vendor>\<theme>\web\js respected folder.

  • I have luma theme. – Sylon Dec 23 '16 at 13:28
  • I would never recommend to change the code inside a core module as this will cause issues with any magento updates in future. so Just create new custom theme check this doc to create custom theme How to create theme?. – Dipesh Rangani Dec 23 '16 at 13:41

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.