JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<!-- Place somewhere in the <body> of your page -->
<div class="wrap">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="http://placehold.it/400x200&text=1" />
            </li>
            <li>
                <img src="http://placehold.it/400x200&text=2" />
            </li>
            <li>
                <img src="http://placehold.it/400x200&text=3" />
            </li>
            <li>
                <img src="http://placehold.it/400x200&text=4" />
            </li>
        </ul>
    </div>
</div>

CSS

.wrap {
    background: red;
}
img {
    margin: 0 auto !important;
    width: 400px !important;
    height: 300px !important;
}
.flexslider .slides > li {
    display: block !important;
    -webkit-backface-visibility: visible !important;
}

JavaScript

$('.flexslider').flexslider({
    animation: "slide"
});