JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<script src="http://postimg.org/image/5gdx6lbzv/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider.js"></script>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150" />
</li>
<li>
<img src="http://placehold.it/350x150" />
</li>
<li>
<img src="http://placehold.it/350x150" />
</li>
</ul>
</div>
CSS
/*
* jQuery FlexSlider v2.5.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 and later license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*
*/
/* ====================================================================================================================
* FONT-FACE
* ====================================================================================================================*/
@font-face {
font-family: 'flexslider-icon';
src: url('fonts/flexslider-icon.eot');
src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/* ====================================================================================================================
* RESETS
* ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover,
.flex-container a:focus,
.flex-slider a:focus {
outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* ====================================================================================================================
* BASE STYLES
* ====================================================================================================================*/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
...
JavaScript
$('.flexslider').flexslider(
{
animation: "slide",
slideshow: false
}
);