How do I add this to my Wix website?

[RealBlackB1RD]

I have a Wix site and I want to add this Before and After slider to my site. how to do it? Thanks and have a good day.

[raphaeleidus]

hi @BlackB1RDD in the custom html form put this code after replacing the two image urls with your images.

<div id="container1">
 <!-- The before image is first -->
 <img src="http://placehold.it/800x500&amp;text=1" />
 <!-- The after image is last -->
 <img src="http://placehold.it/800x500&amp;text=2" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/zurb/twentytwenty/599bc2df/js/jquery.event.move.js"></script>
<script src="https://cdn.rawgit.com/zurb/twentytwenty/599bc2df/js/jquery.twentytwenty.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/zurb/twentytwenty/599bc2df/css/twentytwenty.css" type="text/css" media="screen" />

<script>
$(function(){
  $("#container1").twentytwenty();
});
</script>

[brymonster]

Hello there! resurrecting this one! Any reason why my HTML frame using this code never loads first try? Always have to reload the website.. is there a better way? thanks!

[murfstar0007]

Hello there! resurrecting this one! Any reason why my HTML frame using this code never loads first try? Always have to reload the website.. is there a better way? thanks!

Hi Brymonster,

try this script:

[brymonster]

@murfstar0007 thanks for the reply! unfortunately I don't understand what you are suggesting. here is my current use. how would I modify it?

<div id="container1">
 <!-- The before image is first -->
 <img src="https://static.wixstatic.com/media/38adcd_20cbaf4d121c4b1cac6381fc5b714d8c~mv2.jpg" />
 <!-- The after image is last -->
 <img src="https://static.wixstatic.com/media/38adcd_47920328a4d0402bb62a24f5250018b6~mv2.jpg" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/zurb/twentytwenty/599bc2df/js/jquery.event.move.js"></script>
<script src="https://cdn.rawgit.com/zurb/twentytwenty/599bc2df/js/jquery.twentytwenty.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/zurb/twentytwenty/599bc2df/css/twentytwenty.css" type="text/css" media="screen" />

<script>
$(function(){
  $("#container1").twentytwenty();
});

> </script>

[murfstar0007]

@brymonster, try replacing

<script>
$(function(){
  $("#container1").twentytwenty();
});

> </script>

and change it to

<script>
$(document).ready(function() {
    $("#container1").each(function(){
        $(this).twentytwenty().trigger('resize');
    });
});
$(window).load(function() {
       $(window).trigger("resize.twentytwenty");
});
</script>

hopefully that works on wix. it works on my sites that i build (but they not on wix).

[brymonster]

Thanks @murfstar0007 that may have done the trick, combined with much smaller image sizes. any way to change the font? using the above code Im getting serif in on an entirely sans serif webpage. looks like the foundation.css is using Helvetica, but thats not what my slide is showing up.. would love to change it. thanks!

[murfstar0007]

if you can move the css in the html <link rel="stylesheet" href="https://cdn.rawgit.com/zurb/twentytwenty/599bc2df/css/twentytwenty.css" type="text/css" media="screen" /> above your main fonts/style css file.

if you can not do this. find the class's you want to override in the HTML then create a css rule in your CSS file, if that still doesnt work add !important; next to each style in your css file. this will override the imported styles from twentytwenty.css