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.
Add a comment
|
3 Answers
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">
<body>
<referenceContainer name="before.body.end">
<block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::js.phtml"/>
</referenceContainer>
</body>
</page>
Step 2:- Now, please create file js.phtml file under path app/design/frontend/{{YOUR THEME NAME HERE}}/default/Magento_Theme/templates/
<script>
require([
'jquery',
'jquery.event.move',
'jquery.twentytwenty',
'custom',
]);
</script>
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.
Cheers!
answered Aug 17, 2021 at 11:10
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:
define([
'jquery',
'twentyTwenty'], function ($) {
'use strict';
return function (options, el) { // for declarative notation
$("#container1").twentytwenty();
}; });
and you can use it like this
data-mage-init='{"twentyTwentyInit":{}}'>
I found a workaround for replacement. Just use the Slider Revolution plugin.
