SLIDER
<style>
.slider-container {position: relative;max-width:1000px;margin: 40px auto;overflow: hidden;}.video-slider {display: flex;transition: transform 0.5s ease-in-out;}.video-slide {min-width:100%;padding: 0 10px;box-sizing: border-box;}.video-wrapper {position: relative;width: 100%;padding-bottom: 56.25%; height: 0;}.video-wrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;border-radius: 12px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);}.slider-btn {position: absolute;top: 50%;transform: translateY(-50%);background: #000000aa;color: #fff;border: none;padding: 10px 16px;cursor: pointer;border-radius: 50%;z-index: 10;font-size: 18px;}.slider-btn:hover {background: red;color: white;}.prev-btn {left: 10px;}.next-btn { right: 10px;}@media (max-width: 768px) {.slider-btn {padding: 8px 12px;font-size: 16px;}}
</style>
<div class="slider-container">
<button class="slider-btn prev-btn">❮</button>
<div class="video-slider" id="videoSlider">
<div class="video-slide">
<div class="video-wrapper">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/1n_QpofW_h4" title="YouTube video player"></iframe>
</div></div>
<div class="video-slide">
<div class="video-wrapper">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/Uv_7MATmvGU" title="YouTube video player"></iframe>
</div>
</div>
<div class="video-slide">
<div class="video-wrapper">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/lb_VI7yzvZk" title="YouTube video player"></iframe>
</div>
</div>
<div class="video-slide">
<div class="video-wrapper">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/pMnidPpy0Kk" title="YouTube video player"></iframe>
</div>
</div>
</div>
<button class="slider-btn next-btn">❯</button>
</div>
<script>
const slider = document.getElementById('videoSlider');
const slides = document.querySelectorAll('.video-slide');
let index = 0;
document.querySelector('.next-btn').addEventListener('click', () => {
stopVideo(index);
index = (index + 1) % slides.length;
updateSlider();
});
document.querySelector('.prev-btn').addEventListener('click', () => {
stopVideo(index);
index = (index - 1 + slides.length) % slides.length;
updateSlider();
});
function updateSlider() {
slider.style.transform = `translateX(-${index * 100}%)`;
}
function stopVideo(i) {
const iframe = slides[i].querySelector('iframe');
iframe.contentWindow.postMessage(JSON.stringify({
event: 'command',
func: 'stopVideo',
args: []
}), '*');
}
</script>
0 Komentar untuk "SLIDER"