JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div class="slideshow-listing"
data-cycle-slides="figure"
data-cycle-auto-height="4:3"
data-cycle-pager-template="<span><img src='{{src}}' /></span>"
data-pause-on-hover="true">
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/450x370"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <figure><img src="http://placehold.it/250x570"></figure>
    <div class="cycle-pager"></div>
</div><!-- /slideshow-listing -->

SCSS

.slideshow-listing {
	max-width: 400px;
    margin: 20px auto;
	padding-bottom: 15.5%; // Needs to vary depending on slideshow height
	overflow: hidden;
    background: green;
	figure {
		position: absolute;
		top: 0;
		bottom: 15.5%;
        width: 100%;
        margin: 0;
        padding: 0;
		img {
		    display: block;
		    max-width: 100%;
			max-height: 100%;
			margin: 0 auto;
		}
	}
	.cycle-pager {
		bottom: 0;
		right: -10px; // to account for padding on final span
		left: 0;
        background: red;
		span {
			float: left;
			width: 20%;
			padding-right: 10px;
			opacity: .75;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
			img {
			    display: block;
                height: 32px;
                width: 32px;
            }
			&.cycle-pager-active, &:hover, &:focus, &:active { opacity: 1; }
		}
	}
}

.cycle-pager {
	z-index: 110;
	position: absolute;
	span {
		cursor: pointer;
		@include transition($animationSpeed);
	}
}

JavaScript

$(function() {
    var $slideshow = $(".slideshow-listing");
    var $figures = $slideshow.find("figure");
    var length = $figures.length;
    
    $figures.each(function() {
        var $this = $(this);
        var src = $this.find("img").attr("src");
        $this.prop("src", src);
        length--;
        
        if (!length) {
            $slideshow.cycle();
        }
    });
});