Answer the question
In order to leave comments, you need to log in
How to add slider for video slider before after?
Given the code taken from the forum for the Video slider "BEFORE and AFTER",
you need to add a dynamic slider, the question is: "How to implement?"
no ideas, I will be glad to help)
https://codepen.io/dudleystorey/pen/EIKzk
<div id="video-compare-container">
<br id="video__hr">
<video loop autoplay muted src="videos/after.mp4">
</video>
<div id="video-clipper">
<video loop autoplay muted src="videos/before.mp4">
</video>
</div>
</div>
<code lang="html">
<code lang="css">
#video-compare-container {
display: inline-block;
line-height: 0;
position: relative;
width: 33.33333%;
height: 180%;
padding-top: 37.5%;
border-top: 1px dotted var(--gray);
border-bottom: 1px dotted var(--gray);
}
#video-compare-container > video {
width: 100%;
position: absolute;
top: 0; height: 100%;
}
#video-clipper {
width: 50%; position: absolute;
top: 0; bottom: 0;
overflow: hidden;
}
#video-clipper video {
width: 200%;
position: absolute;
height: 100%;
}
</code>
<code lang="javascript">
function trackLocation(e) {
var rect = videoContainer.getBoundingClientRect(),
position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
if (position <= 100) {
videoClipper.style.width = position+"%";
clippedVideo.style.width = ((100/position)*100)+"%";
clippedVideo.style.zIndex
= 3;
}
}
var videoContainer = document.getElementById("video-compare-container"),
videoClipper = document.getElementById("video-clipper"),
clippedVideo = videoClipper.getElementsByTagName("video")[0];
videoContainer.addEventListener("mousemove", trackLocation, false);
videoContainer.addEventListener("touchstart",trackLocation,false);
videoContainer.addEventListener("touchmove",trackLocation,false);
</code>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question