Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="slider">
- <input type="radio" name="slider" id="slide1" checked="">
- <input type="radio" name="slider" id="slide2">
- <input type="radio" name="slider" id="slide3">
- <input type="radio" name="slider" id="slide4">
- <input type="checkbox" id="toggle">
- <div id="slides">
- <div id="overflow">
- <div class="inner">
- <div class="page">
- <video src="videos/1.mp4" preload="metadata" autoplay controls></video>
- </div>
- <div class="page">
- <video src="videos/2.mp4" preload="metadata" controls></video>
- </div>
- <div class="page">
- <video src="videos/3.mp4" preload="metadata" controls></video>
- </div>
- <div class="page">
- <video src="videos/1.mp4" preload="metadata" controls></video>
- </div>
- </div> <!--inner-->
- </div> <!--overflow-->
- </div> <!--slides-->
- <div id="active">
- <label for="slide1">
- <video src="videos/1.mp4"></video>
- </label>
- <label for="slide2">
- <video src="videos/2.mp4"></video>
- </label>
- <label for="slide3">
- <video src="videos/3.mp4"></video>
- </label>
- <label for="slide4">
- <video src="videos/1.mp4"></video>
- </label>
- </div>
- #slider{
- position: relative;
- width:424px;
- height: 298px;
- left:140px;
- top:135px;
- margin: 0;
- cursor: pointer;
- padding:0;
- }
- #slides{
- width: 424px;
- height: 298px;
- }
- .inner{
- width:400%;
- }
- #slide1:checked ~ #slides .inner { margin-left:0;}
- #slide2:checked ~ #slides .inner { margin-left:-100%;}
- #slide3:checked ~ #slides .inner { margin-left:-200%;}
- #slide4:checked ~ #slides .inner { margin-left:-300%;}
- #slide5:checked ~ #slides .inner { margin-left:-400%;}
- .page{
- float:left;
- width:25%;
- }
- .page video{
- width:424px;
- height: 298px;
- }
- .page img{
- width:424px;
- height: 298px;
- }
- #overflow{
- overflow: hidden;
- }
- #slider input{
- display: none;
- }
- #active label video {
- width:97px;
- height: 68px;
- display: inline-block;
- cursor: pointer;
- margin-left:4px;
- opacity: 0.5;
- top:4px;
- position: relative;
- }
- #active label img{
- height: 69px;
- width: 97px;
- cursor:pointer;
- position: relative;
- top:5px;
- }
- label video:focus{
- border: 2px solid white;
- }
- #slide1:checked ~ #active label:nth-child(1),
- #slide2:checked ~ #active label:nth-child(2),
- #slide3:checked ~ #active label:nth-child(3),
- #slide4:checked ~ #active label:nth-child(4){
- border: 3px solid white;
- padding-top: 50px;
- }
- #slides .inner{
- -webkit-transition: all 0.8s ease-in-out;
- transition: all 0.8s ease-in-out;
- }
- var labels = document.querySelectorAll('#active label');
- for (var i = 0; i < labels.length; i++) {
- labels[i].addEventListener('click', function(event) {
- var videos = document.querySelectorAll('#slides video');
- var index = this.getAttribute('for').replace('slide', '');
- var currentVideo = videos[index-1];
- for (var p = 0; p < videos.length; p++) {
- videos[p].pause();
- videos[p].currentTime = 0;
- }
- currentVideo.play();
- });
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement