JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<section class="slider">
<div id="degrees-photo-slider" class="flexslider carousel">
<ul class="slides">
<li class="wrapper">
<li >
<img class="top" src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
<img class="bottom" src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li class="wrapper">
<li >
<img class="top" src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
<img class="bottom" src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li class="wrapper">
<li >
<img class="top" src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
<img class="bottom" src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li class="wrapper">
<li >
<img class="top" src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
<img class="bottom" src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li class="wrapper">
<li >
<img class="top" src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
<img class="bottom" src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li class="wrapper">
<li >
<img class="top"...
CSS
li.wrapper {display:block;width:auto;text-align:center}
.wrapper img {display:block;width:100%;}
JavaScript
$(document).ready(function() {
var itemCnt = 4;
var iWidth = $('#degrees-photo-slider.flexslider').width();
$('#degrees-photo-slider.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 1000,
animationSpeed: 300,
animationLoop: false,
directionNav: false,
slideshow: false,
touch: true,
itemWidth: '100%',
minItems: itemCnt,
maxItems: itemCnt,
start: make2Rows(iWidth)
});
});
function make2Rows(iWidth) {
$('#degrees-photo-slider .slides > li img, #degrees-photo-slider .slides > li').css('width', iWidth +'px');
}