Advertisement
Guest User

Untitled

a guest
Aug 22nd, 2017
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.61 KB | None | 0 0
  1. <div id="slider">
  2. <input type="radio" name="slider" id="slide1" checked="">
  3. <input type="radio" name="slider" id="slide2">
  4. <input type="radio" name="slider" id="slide3">
  5. <input type="radio" name="slider" id="slide4">
  6. <input type="checkbox" id="toggle">
  7.  
  8. <div id="slides">
  9. <div id="overflow">
  10. <div class="inner">
  11. <div class="page">
  12. <video src="videos/1.mp4" preload="metadata" autoplay controls></video>
  13. </div>
  14. <div class="page">
  15. <video src="videos/2.mp4" preload="metadata" controls></video>
  16. </div>
  17. <div class="page">
  18. <video src="videos/3.mp4" preload="metadata" controls></video>
  19. </div>
  20. <div class="page">
  21. <video src="videos/1.mp4" preload="metadata" controls></video>
  22. </div>
  23. </div> <!--inner-->
  24. </div> <!--overflow-->
  25. </div> <!--slides-->
  26.  
  27. <div id="active">
  28. <label for="slide1">
  29. <video src="videos/1.mp4"></video>
  30. </label>
  31. <label for="slide2">
  32. <video src="videos/2.mp4"></video>
  33. </label>
  34. <label for="slide3">
  35. <video src="videos/3.mp4"></video>
  36. </label>
  37. <label for="slide4">
  38. <video src="videos/1.mp4"></video>
  39. </label>
  40. </div>
  41.  
  42. #slider{
  43. position: relative;
  44. width:424px;
  45. height: 298px;
  46. left:140px;
  47. top:135px;
  48. margin: 0;
  49. cursor: pointer;
  50. padding:0;
  51. }
  52. #slides{
  53. width: 424px;
  54. height: 298px;
  55. }
  56. .inner{
  57. width:400%;
  58. }
  59. #slide1:checked ~ #slides .inner { margin-left:0;}
  60. #slide2:checked ~ #slides .inner { margin-left:-100%;}
  61. #slide3:checked ~ #slides .inner { margin-left:-200%;}
  62. #slide4:checked ~ #slides .inner { margin-left:-300%;}
  63. #slide5:checked ~ #slides .inner { margin-left:-400%;}
  64. .page{
  65. float:left;
  66. width:25%;
  67. }
  68. .page video{
  69. width:424px;
  70. height: 298px;
  71. }
  72. .page img{
  73. width:424px;
  74. height: 298px;
  75. }
  76. #overflow{
  77. overflow: hidden;
  78. }
  79. #slider input{
  80. display: none;
  81. }
  82. #active label video {
  83. width:97px;
  84. height: 68px;
  85. display: inline-block;
  86. cursor: pointer;
  87. margin-left:4px;
  88. opacity: 0.5;
  89. top:4px;
  90. position: relative;
  91. }
  92. #active label img{
  93. height: 69px;
  94. width: 97px;
  95. cursor:pointer;
  96. position: relative;
  97. top:5px;
  98. }
  99. label video:focus{
  100. border: 2px solid white;
  101. }
  102.  
  103. #slide1:checked ~ #active label:nth-child(1),
  104. #slide2:checked ~ #active label:nth-child(2),
  105. #slide3:checked ~ #active label:nth-child(3),
  106. #slide4:checked ~ #active label:nth-child(4){
  107. border: 3px solid white;
  108. padding-top: 50px;
  109. }
  110.  
  111. #slides .inner{
  112. -webkit-transition: all 0.8s ease-in-out;
  113. transition: all 0.8s ease-in-out;
  114. }
  115.  
  116. var labels = document.querySelectorAll('#active label');
  117. for (var i = 0; i < labels.length; i++) {
  118.  
  119. labels[i].addEventListener('click', function(event) {
  120. var videos = document.querySelectorAll('#slides video');
  121. var index = this.getAttribute('for').replace('slide', '');
  122. var currentVideo = videos[index-1];
  123.  
  124. for (var p = 0; p < videos.length; p++) {
  125. videos[p].pause();
  126. videos[p].currentTime = 0;
  127. }
  128. currentVideo.play();
  129. });
  130. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement