I need to add a picture comparison function. This is the code Twenty Twenty I need, it looks very good, and it's free. But we don't know how to make it run.

Twenty Twenty Download Link https://zurb.com/playground/twentytwenty

Thank you everyboby. enter image description here


Please follow below steps to call js file properly.

Step 1:- Please create file default.xml under path app/design/frontend/{{YOUR THEME NAME HERE}}/default/Magento_Theme/layout/

Add below code in your 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">
        <referenceContainer name="before.body.end">
            <block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::js.phtml"/>

Step 2:- Now, please create file js.phtml file under path app/design/frontend/{{YOUR THEME NAME HERE}}/default/Magento_Theme/templates/


Step 3:- Add your js file in path app/design/frontend/{{YOUR THEME NAME HERE}}/default/web/js

Step 4:- Add your css in path app/design/frontend/{{YOUR THEME NAME HERE}}/default/web/css/twentytwenty.css

Above will work for any custom js/css.



You have to call the library by including it with require js:

var config = {
map: {
    '*': {
        'twentyTwenty': 'Vendor_Twentytwenty/js/twentytwenty/jquery.twentytwenty',
        'twentyTwentyInit': 'Vendor_Twentytwenty/js/twentytwenty/twentytwenty.init'
deps: [

next create the init:

'twentyTwenty'], function ($) {
'use strict';
return function (options, el) { // for declarative notation
}; });

and you can use it like this


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.