JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<div class="carousel">
    <div class="carousel-control-prev">
        <img src="http://placehold.it/20x40/f42bff/ffffff&text=P" />
    </div>
    <div class="carousel-stage-container">
        <ol class="carousel-stage">
            <li class="carousel-slide active">
                <img class="carousel-slide-img" src="http://placehold.it/160x90&text=Slide 1" />
                <div class="carousel-slide-caption">
                    <p>Sed justo leo, vehicula at cursus id, imperdiet at mi. Proin pulvinar, odio posuere ornare gravida, elit lorem fermentum elit.</p>
                </div>
            </li><!--
            --><li class="carousel-slide">
                <img class="carousel-slide-img" src="http://placehold.it/800x450&text=Slide 2" />
                <div class="carousel-slide-caption">
                    <p>Sed justo leo, vehicula at cursus id, imperdiet at mi. Proin pulvinar, odio posuere ornare gravida, elit lorem fermentum elit.</p>
                </div>
            </li>
        </ol>
    </div>
    <div class="carousel-control-next">
        <img src="http://placehold.it/20x40/f42bff/ffffff&text=N" />
    </div>
    <ol class="carousel-control-pips">
        <li class="carousel-control-pip"></li>
    </ol>
</div>

CSS

body {
    padding: 20px;
}

.carousel,
.carousel-stage{
    position: relative;
}

.carousel-stage-container {
    height: 0;
    padding-top: 56.25%;
    position: relative;
}

.carousel-stage {
    align-items: center;
    display: flex;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-slide {
    align-items: center;
    display: inline-flex;
    flex-basis: 0;
    flex-direction: column;
    opacity: 0;
    transition: all 0.25s ease-in;
}
.carousel-slide:not(.active) {
    height: 0;
}
.carousel-slide.active {
    flex-basis: 100%;
    opacity: 1;
}

.carousel-slide-img {
    max-width: 100%;
}

.carousel-control-next,
.carousel-control-prev {
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 1;
}
.carousel-control-next {
    right: 0;
    transform: translateY(-50%);
}
.carousel-control-prev {
    left: 0;
    transform: translateY(-50%);
}

.carousel-slide-caption {
    background: yellow;
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 0.5em;
    position: absolute;
    width: 100%;
}
.carousel-slide.active .carousel-slide-caption {
    opacity: 1;
}

JavaScript

$('.carousel-control-prev, .carousel-control-next').click(function(event) {
    var direction = ~event.currentTarget.className.indexOf('prev') ? -1 : 1,
        $carousel = $(this).parent(),
        $stage = $carousel.find('.carousel-stage'),
        slideCount = $stage.children().length,
        $activeSlide = $stage.find('.carousel-slide.active'),
        activeSlideIndex = $activeSlide.index(),
        i = (direction > 0 && activeSlideIndex === slideCount-1) ? 0 : activeSlideIndex+direction;
    console.log($stage)
    $activeSlide.removeClass('active');
    $stage.children().eq( i ).addClass('active');
});