JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://raw.github.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://dummyimage.com/600x400/000/fff" />
            <div class="inner">
                <h2>This is the header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, vitae, voluptatibus totam voluptate maxime fugiat animi facilis error modi quas mollitia dignissimos ullam id obcaecati sed nisi nam nostrum delectus.</p>
            </div>
        </li>
        <li>
            <img src="http://dummyimage.com/600x400/000/ff0000" />
            <div class="inner">
                <h2>This is the header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, vitae, voluptatibus totam voluptate maxime fugiat animi facilis error modi quas mollitia dignissimos ullam id obcaecati sed nisi nam nostrum delectus.</p>
            </div>
        </li>
        <li>
            <img src="http://dummyimage.com/600x400/000/fff" />
            <div class="inner">
                <h2>This is the header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, vitae, voluptatibus totam voluptate maxime fugiat animi facilis error modi quas mollitia dignissimos ullam id obcaecati sed nisi nam nostrum delectus.</p>
            </div>
        </li>
        <li>
            <img src="http://dummyimage.com/600x400/000/ff0000" />
            <div class="inner">
                <h2>This is the header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, vitae, voluptatibus totam voluptate maxime fugiat animi facilis error modi quas mollitia dignissimos ullam id obcaecati sed nisi nam nostrum delectus.</p>
            </div>
        </li>
    </ul>
</div>

CSS

body {
    color: white;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.flexslider .slides {
    zoom: 1;
}
.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
    position: relative;
}
.flexslider .slides img {
    width: 100%;
    display: block;
}
.slides, .flex-control-nav, .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.flex-control-nav a {
    display: block;
    padding: 5px;
    background: red;
    margin-bottom:1px;
    cursor: pointer;
    text-align:center;
}

.inner {
    position: absolute;
    top: 10%;
    left: 10%;
    display: block;
    width: 200px;
    background:grey;
    padding: 2%;
}

JavaScript

$('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        before: function(slider) {
            $('.flex-active-slide').removeClass('is-active');
        },
        after: function (slider) {
            console.log(slider.count);

            $('.flex-active-slide').addClass('is-active');
        }
    });