Auto Changing Background Slider

### HTML

<div class="background-slider">
    <div class="slide" style="background-image: url('image1.jpg');"></div>
    <div class="slide" style="background-image: url('image2.jpg');"></div>
    <div class="slide" style="background-image: url('image3.jpg');"></div>
</div>

### CSS

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

.background-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

### JavaScript

let currentIndex = 0;
const slides = document.querySelectorAll('.slide');

function changeSlide() {
    slides[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % slides.length;
    slides[currentIndex].classList.add('active');
}

// Initialize the first slide
slides[currentIndex].classList.add('active');

// Change slide every 5 seconds
setInterval(changeSlide, 5000);

### Explanation

1. **HTML Structure**: You create a container (`.background-slider`) that holds each slide as a separate `div`. Each slide uses inline styles for the background image.

2. **CSS Styles**:
– The `.background-slider` class sets the dimensions and hides overflow.
– Each `.slide` is absolutely positioned to cover the entire container, with a transition effect applied to the opacity.
– The `.active` class is used to control which slide is currently visible.

3. **JavaScript Functionality**:
– The `changeSlide` function removes the `active` class from the current slide and adds it to the next one in the array.
– It uses `setInterval` to automatically switch slides every 5 seconds.

### Additional Tips

– **Responsive Design**: Make sure to test the slider on different screen sizes and devices.
– **Image Preloading**: Preload images to avoid delays when changing backgrounds.
– **Pause on Hover**: You can add functionality to pause the slide change when the user hovers over the slider.

This basic setup gives you a smooth, auto-changing background slider that looks similar to a video playing in the background. You can customize the transition duration, timing, and images according to your needs.