Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Vipul-Gejage/Disney-Hotstar-Clone/llms.txt

Use this file to discover all available pages before exploring further.

The hero carousel is a full-width slide show that sits directly below the fixed navbar in Hotstar.html. It cycles through five featured titles — Loki, The Falcon and the Winter Soldier, Wanda vision, Raya, and Luca — automatically advancing every 3000 milliseconds. An infinite loop is achieved by cloning all five slides in JavaScript and appending them to the end of the .carousel element, so when the last real slide transitions out the strip wraps back to position zero without a visible jump.

​
The Five Slides

Each .slider contains a .slide-content div with a title and description on the left, and a full-height banner image on the right. The five slides in source order are:
#TitleImage
1Lokiimages/slider 1.PNG
2The Falcon and the Winter Soldierimages/slider 2.PNG
3Wanda visionimages/slider 3.PNG
4Rayaimages/slider 4.PNG
5Lucaimages/slider 5.PNG

​
HTML Structure for a Single Slide

<div class="slider">
    <div class="slide-content">
        <h1 class="movie-title">Loki</h1>
        <p class="movie-des">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Suscipit possimus quibusdam exercitationem, esse veniam nulla!</p>
    </div>
    <img src="images/slider 1.PNG" alt="Loki">
</div>
The entire logic lives in Hotstar.js inside a DOMContentLoaded event listener. It runs in three steps: clone the slides, define the advance function, then start the interval timer.

​
Step 1 — cloneSlides()

After the DOM is ready, cloneSlides() iterates over every .slider element captured at page load and calls cloneNode(true) on each one. The deep clones are appended directly to .carousel, effectively doubling the number of visible slides. This means the strip is wide enough to advance through all five originals before silently snapping back to position zero.

​
Step 2 — showSlide()

Each time showSlide() is called, it increments the index counter and applies a translateX transform to the .carousel element, shifting it left by index × 100% of its own width. The CSS transition on the carousel handles the smooth 0.5-second ease-in-out animation. Once index reaches or exceeds the original slide count (5), a setTimeout of 500ms fires — long enough for the outgoing transition to finish — and then instantly snaps the carousel back to translateX(0) with transition: none, resetting index to 0. Because the clones are visually identical to the originals, the snap is imperceptible.

​
Step 3 — setInterval

setInterval(showSlide, 3000) fires showSlide every 3000ms, producing the 3-second auto-advance cycle.

​
JavaScript Source

document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.querySelector('.carousel');
    const slides = document.querySelectorAll('.slider');
    let index = 0;

    function cloneSlides() {
        slides.forEach(slide => {
            const clone = slide.cloneNode(true);
            carousel.appendChild(clone);
        });
    }

    function showSlide() {
        index++;
        carousel.style.transition = 'transform 0.5s ease-in-out';
        carousel.style.transform = `translateX(${-index * 100}%)`;

        if (index >= slides.length) {
            setTimeout(() => {
                carousel.style.transition = 'none';
                carousel.style.transform = 'translateX(0)';
                index = 0;
            }, 500);
        }
    }

    cloneSlides();

    setInterval(showSlide, 3000); // Adjust the interval time as needed
});

​
CSS

The .carousel-container clips the overflowing slides with overflow-x: hidden and offsets itself below the 80px navbar using margin-top: 80px. The .carousel is a flex row so all .slider children sit side-by-side and can be shifted left with a single translateX. Each .slider is set to flex: 0 0 auto with width: 100% so each slide occupies exactly one full carousel width. The .slide-content overlay uses a left-to-right gradient that fades from a solid dark tone to transparent, ensuring the title text remains legible over the banner image. 
.carousel-container {
    position: relative;
    width: 100%;
    height: 450px;
    padding: 20px 0;
    overflow-x: hidden;
    margin-top: 80px;
}
.carousel {
    display: flex;
    width: 90%;
    height: 100%;
    position: relative;
    margin: auto;
}
.slider {
    flex: 0 0 auto;
    margin-right: 30px;
    position: relative;
    background: rgba(0, 0, 0, 5);
    border-radius: 5px;
    width: 100%;
    height: 100%;
    left: 0;
    transition: 1s;
    overflow: hidden;
}
.slide-content {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to right, #030b17 80%, #0c111b00);
    color: #fff;
}
.slider img {
    width: 70%;
    min-height: 100%;
    object-fit: cover;
    display: block;
    margin-left: auto;
}

​
Adding New Slides

To add a sixth (or any additional) slide, insert a new .slider div inside the .carousel div in Hotstar.html before the closing </div> comment. The JavaScript automatically picks up all .slider elements at DOMContentLoaded, so no JS changes are needed. 
<div class="slider">
    <div class="slide-content">
        <h1 class="movie-title">Your New Title</h1>
        <p class="movie-des">Your description text here.</p>
    </div>
    <img src="images/your-banner.PNG" alt="Your New Title">
</div>
To change how quickly the carousel advances, replace the 3000 value in setInterval(showSlide, 3000) with any number of milliseconds. For example, setInterval(showSlide, 5000) produces a 5-second interval. The fade-out timeout inside showSlide (currently 500) should remain in sync with the CSS transition duration (transform 0.5s ease-in-out).

Build docs developers (and LLMs) love

Get started for freeTalk to us