JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://malsup.github.io/jquery.cycle.all.js"></script>
<div class="slideshow">
<img src="http://pixabay.com/static/uploads/photo/2015/05/07/19/49/girl-757031_640.jpg" alt="" />
<img src="http://pixabay.com/static/uploads/photo/2015/03/26/10/29/beach-691429_640.jpg" alt="" />
<img src="http://pixabay.com/static/uploads/photo/2015/05/07/23/28/girl-757357_640.jpg" alt="" />
</div>
CSS
.slideshow {
width:100%;
}
.slideshow img {
width: 100%;
}
JavaScript
$(document).ready(function() {
$('.slideshow').cycle({
timeout: 400,
fx: 'scrollHorz',
fit: 1,
next: '#next',
prev: '#prev',
});
$(window).resize(function() {
var slideDiv = $('.slideshow');
var ratio = (640/426);
var w = slideDiv.parent().width();
var h = w / ratio;
slideDiv.width(w);
slideDiv.height(h);
slideDiv.children().each(function() {
$(this).width(w); // "this" is the current element in the loop
$(this).height(h); // "this" is the current element in the loop
});
});
});