Image Carousel

HTML Example

    <div class="slide">
        <div class="slide-content">
            <div class="slide-numbers">2 / 4</div>
            <div class="slide-caption">
                <h3 class="slide-title">Slide Caption</h3>
                <p>Stock image</p>
            </div>
            <img src="img2.jpg" class="slide-img" alt="">
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <div class="slide-numbers">3 / 4</div>
            <div class="slide-caption">
                <h3 class="slide-title">Slide Caption</h3>
                <p>Stock image</p>
            </div>
            <img src="img3.jpg" class="slide-img" alt="">
        </div>
    </div>

    <div class="slide">
        <div class="slide-content">
            <div class="slide-numbers">4 / 4</div>
            <div class="slide-caption">
                <h3 class="slide-title">Slide Caption</h3>
                <p>Stock image</p>
            </div>
            <img src="img4.jpg" class="slide-img" alt="">
        </div>
    </div>

</div>

JS Example

const carousel1 = new Carousel("#carousel-1", ".slide");