JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<script src="http://cdn.jsdelivr.net/flexslider/2.1/jquery.flexslider-min.js"></script>
<div id="carousel-testimonial" class="flexslider">
    <ul class="slides">
        <li>
            <p class="flex-caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </li>
        <li>
            <p class="flex-caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </li>
        <li>
            <p class="flex-caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </li>
        <li>
            <p class="flex-caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </li>
        <li>
            <p class="flex-caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </li>
    </ul>
    <table class="carousel-controls" id="testimonials-controls">
        <tr>
            <td...

CSS

#carousel-testimonial .slides li{
/*	width: 480px;*/
	margin-right: 20px;
	background-color: #fff;
	/*border: 1px solid #fff;*/
	box-shadow: 0px 2px 1px 0px rgba(182, 178, 174, 0.75);
}
#carousel-testimonial img{
	width: 120px;
	height: 120px;
	float: left;
	margin: 5px 20px 0 5px;
}
#carousel-testimonial .flex-caption{
	padding: 10px 20px;
}

JavaScript

$(window).load(function(){
	$('#carousel-testimonial').flexslider({
	    animation: "slide",
	    controlNav: false,
	    controlsContainer: '#testimonials-controls .nav-pagination',
	    directionNav: false,
	    animationLoop: true,
	    slideshow: false,
	    itemWidth: 480,
	    itemMargin: 20
	    // minItems: 2,
	    // maxItems: 2
	});
	$('#carousel-testimonial .prev').click(function(){
		$('#carousel-testimonial').flexslider("prev");
		return false;
	});
	$('#carousel-testimonial .next').click(function(){
		$('#carousel-testimonial').flexslider("next");
		return false;
	});
});