JSFiddle - React, Tailwind, and code Playground

by cherryflavourpez

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div class="slideshow-listing cycle-slideshow"
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; }
			&.cycle-pager-active, &:hover, &:focus, &:active { opacity: 1; }
		}
	}
}

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