JSFiddle - React, Tailwind, and code Playground

by Lysander

HTML

<div class="slider">
    <div class="prev">previous slide</div>
    <div class="next">next slide</div>
    <div class="slide first">
        <div>Lorem ipsum</div>
    </div>
    <div class="slide second">
        <img src="http://placekitten.com/g/300/300" />
        <img src="http://placekitten.com/g/100/100" />
        <div>dolor</div>
        <a href="#">Poo</a>
    </div>
    <div class="slide third">
        <div>sit amet.</div>
        <span>fin</span>
    </div>
</div>

CSS

.slider {
    overflow: hidden;
    position: relative;
}

.slider .prev, .slider .next {
    text-indent: -9999px;
    position: absolute;
    cursor: pointer;
    cursor: hand;
    z-index: 1;
}

.slide {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}

.slide * {
    position: absolute;
}

/*
    Wysokosc slidera oraz pozycje i inne wlasciwosci przyciskow do zmieniania slajdow:
*/
.slider {
    height: 300px;
    background: #f5f5f5;
}

.slider .prev, .slider .next {
    bottom: 10px;
    width: 20px;
    height: 20px;
}

.slider .prev {
    right: 40px;
    background: #ccc;
}

.slider .next {
    right: 10px;
    background: #ccc;
}

/*
    Wlasciwosci elementow slajdow -> zastapic wlasnymi:
*/
body {
    padding: 20px;
}
.slider .first div, .slider .second div, .slider .third div {
    font: 25px/50px Arial;
    color: #444;
    width: 100%;
    text-align: center;
    top: 125px;
}
.slider .first {
    background: #ddd;
}
.slider .second {
    background: #eee;
}
.slider .second a {
    background: #fff;
    color: #000;
    top: 185px;
    right: 40px;
    padding: 5px;
    border-radius: 5px;
}
.slider .second img {
    bottom: 0;
    left: 25px;
}
.slider .second img + img {
    bottom: 50px;
    left: auto;
    right: 10px;
}
.slider .third {
    background: #f5f5f5;
}
.slider .third div {
    -webkit-animation: COLORS 0.5s infinite;
}
.slider .third span {
    width: 100%;
    text-align: center;
    color: #aaa;
    font: italic 20px/40px Georgia, serif;
    bottom: 40px;
}

@-webkit-keyframes COLORS {
    0%    { color: rgba(255,0,0,1); }
    50%   { color: rgba(0,255,0,1); }
    100%  { color: rgba(0,0,255,1); }
}

JavaScript

$(document).ready(function () {
    var slides = $('.slide'),
        s_num = slides.size(),
        s_width = $('.slider').width(),
        s_height = $('.slider').height(),
        current = 0,
        time = 600,
        ready = true;

    for (var i = 1; i < s_num; i++) {
        $(slides[i]).css('left', s_width + 'px');
        $(slides[i]).css('top', (-s_height * i) + 'px');
    }

    $('.slider .next').click(function() {
        if (ready) {
            ready = false;
            $(slides[current++]).animate({ left: '-=' + s_width }, time, function() {
                ready = true;
            });
            current %= s_num;
            $(slides[current]).css('left', s_width + 'px');
            $(slides[current]).animate({ left: '-=' + s_width }, time);
        }
    });

    $('.slider .prev').click(function() {
        if (ready) {
            ready = false;
            $(slides[current--]).animate({ left: '+=' + s_width }, time, function() {
                ready = true;
            });
            if (current < 0) {
                current = s_num - 1;
            }
            $(slides[current]).css('left', -s_width + 'px');
            $(slides[current]).animate({ left: '+=' + s_width }, time);
        }
    });
});