Hi guys, I just learned about dynamic pages. I have a code for a before/after photo slider that I would like to connect to my database. I wish when I add the HTML iframe to my dynamic page I could connect it to my database, but I don’t know how. No experience with coding either.
I’m also not sure which field type to use for my code in the database. Object? Text? Below is the code (excuse the incl instructions that make it quite lengthy), my database and how I have the end result in mind.
I’m hoping it’s an easy fix. Thanks 
<style>
/* Our normalize css */
*{
margin:0;
box-sizing: border-box;
}
/* Our wrapper */
.wrapper{
width: 950px;
height: 540px;
position: absolute;
left:50%;
top:50%;
transform:translate3d(-50%,-50%,0);
overflow:hidden;
}
/* Our image information */
.before,
.after {
width:100%;
height:100%;
background-repeat:no-repeat;
background-color: white;
background-size: cover;
background-position: center;
position: absolute;
top:0;
left:0;
pointer-events:none;
overflow: hidden;
}
.content-image{
height:100%;
}
.after{
width:125px;
}
.scroller{
width: 50px;
height:50px;
position: absolute;
left:100px;
top:50%;
transform:translateY(-50%);
border-radius:0%;
background-color: transparent;
opacity:0.9;
pointer-events:auto;
cursor: pointer;
}
.scroller:hover{
opacity:1;
}
.scrolling{
pointer-events:none;
opacity:1;
// z-index: 1;
}
.scroller__thumb{
width:100%;
height:100%;
padding:10px;
}
.scroller:before,
.scroller:after{
content:" ";
display: block;
width: 3px;
height: 9999px;
position: absolute;
left: 50%;
margin-left: 0px;
z-index: 30;
transition:0.1s;
}
.scroller:before{
top:100%;
}
.scroller:after{
bottom:100%;
}
/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
.scroller{
border: 3px solid #fff;
}
.scroller:before,
.scroller:after{
background: #fff;
}
</style>
<div class="wrapper">
<div class="before">
<img class="content-image" src="https://static.wixstatic.com/media/ad784f_822021a013b84b25b9ec08f64059c851~mv2.jpg" draggable="false"/> </div>
<div class="after">
<img class="content-image" src="https://static.wixstatic.com/media/ad784f_22900447ca6c413faae22a5a437ab22d~mv2.jpg" draggable="false"/>
</div>
<div class="scroller">
<svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
</div>
</div>
<script>
// I hope this over-commenting helps. Let's do this!
// Let's use the 'active' variable to let us know when we're using it
let active = false;
// First we'll have to set up our event listeners
// We want to watch for clicks on our scroller
document.querySelector('.scroller').addEventListener('mousedown',function(){
active = true;
// Add our scrolling class so the scroller has full opacity while active
document.querySelector('.scroller').classList.add('scrolling');
});
// We also want to watch the body for changes to the state,
// like moving around and releasing the click
// so let's set up our event listeners
document.body.addEventListener('mouseup',function(){
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
// Let's figure out where their mouse is at
document.body.addEventListener('mousemove',function(e){
if (!active) return;
// Their mouse is here...
let x = e.pageX;
// but we want it relative to our wrapper
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
// Okay let's change our state
scrollIt(x);
});
// Let's use this function
function scrollIt(x){
let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
document.querySelector('.after').style.width = transform+"px";
document.querySelector('.scroller').style.left = transform-25+"px";
}
// Let's set our opening state based off the width,
// we want to show a bit of both images so the user can see what's going on
scrollIt(475);
// And finally let's repeat the process for touch events
// first our middle scroller...
document.querySelector('.scroller').addEventListener('touchstart',function(){
active = true;
document.querySelector('.scroller').classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('touchmove',function(e){ if (!active) return; let x = e.touches[0].pageX; x -= document.querySelector('.wrapper').getBoundingClientRect().left; scrollIt(x);
});
document.body.addEventListener('touchcancel',function(){
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
</script>
