D
D
Dinmukhammed MH2021-04-13 15:15:57
css
Dinmukhammed MH, 2021-04-13 15:15:57

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 question

Ask a Question

731 491 924 answers to any question