Video-slider
Thu Apr 08 2021 06:10:11 GMT+0000 (UTC)
Saved by
@Firrin
#html
#css
#javascript
<div class="custom__wrapper">
<video src="/media/1011/filmtegner-1.mp4" class="custom__slider" autoplay loop muted controls></video>
<ul>
<li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
<li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
<li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
<li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
<li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
</ul>
</div>
<script>
function videoslider(links) {
document.querySelector(".slider").src = links;
}
</script>
.custom__wrapper {
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.custom__wrapper .custom__slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.custom__wrapper ul {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
z-index: 20;
}
.custom__wrapper ul li {
list-style: none;
cursor: pointer;
margin: 10px;
}
.custom__wrapper ul li video {
width: 200px;
transition: all 0.3s;
}
.custom__wrapper ul li video:hover {
transform: scale(1.1);
}
video {
width: 100%;
height: 100%;
}
content_copyCOPY
Comments