You may also like
Similar projects for inspiration
.video-slider-wrapper {
max-width: 1240px;
margin: 0 auto 60px;
padding: 0 15px;
font-family: ‘Montserrat’, sans-serif;
}
.video-slider-wrapper h2 {
font-size: 36px;
font-weight: 600;
color: #2f2f2f;
margin-bottom: 40px;
text-align: center;
}
.video-slider-section {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: flex-start;
}
.video-slider-section .slider-block,
.video-slider-section .video-block {
flex: 1 1 45%;
max-width: 600px;
}
.slider-block {
position: relative;
}
.slider-block img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px;
display: none;
}
.slider-block img.active {
display: block;
}
.slider-controls {
margin-top: 10px;
display: flex;
justify-content: center;
gap: 15px;
}
.slider-controls button {
background-color: #e7b27f;
border: none;
padding: 10px 16px;
border-radius: 6px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
.slider-controls button:hover {
background-color: #d89f6e;
}
.video-block iframe {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
}
@media (max-width: 768px) {
.video-slider-section {
flex-direction: column;
}
.slider-block img,
.video-block iframe {
aspect-ratio: 1 / 1;
}
.video-slider-wrapper h2 {
font-size: 28px;
}
}
let currentIndex = 0;
const slides = document.querySelectorAll(‘.slider-block img’);
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle(‘active’, i === index);
});
}
function prevSlide() {
currentIndex = (currentIndex – 1 + slides.length) % slides.length;
showSlide(currentIndex);
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
