JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<div class="bill-wrapper">
    <div class="bill">
        <img src="http://vignette3.wikia.nocookie.net/gravityfalls/images/6/6e/S1e19_Bill_portal.jpg/revision/latest/scale-to-width-down/1000?cb=20130720210828" alt="" data-caption="Image #1">
<img src="http://vignette1.wikia.nocookie.net/gravityfalls/images/1/15/S1e19_Black_and_white_Bill.jpg/revision/latest/scale-to-width-down/1000?cb=20130720211045" alt="" data-caption="Image #2">
<img src="http://vignette3.wikia.nocookie.net/gravityfalls/images/2/27/S1e19_Bill_with_arms_up.jpg/revision/latest/scale-to-width-down/1000?cb=20130720211143" alt="" data-caption="Image #3">
    </div>
    <div class="bill-caption"><span>[01]</span> <span>[02]</span> <span>[03]</span></div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

html, body{
    position: relative;
    width: 100%;
    height: 100%;
}

.bill-wrapper{
    position: absolute;
    width: 80%;
    height: 250px;
    left: 50%;
    top: 50%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.bill{
    position: relative;
    height: 100%;
    overflow: hidden;
}

.bill-caption{
    text-align: right;
    margin: 5px 0;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #333;
}

.bill-caption span{
    cursor: pointer;
    text-decoration: underline;
}

.bill-caption span:hover{
    color: #555;
    text-decoration: none;
}

JavaScript

$(function(){
    var $fotoramaDiv = $('.bill').fotorama({
    	width: '100%',
        height: 250,
        fit: 'cover',
        ratio: 16/9,
        arrows: false,
        nav: false,
        loop: true
    });
    
    var fotorama = $fotoramaDiv.data('fotorama');
	$('.bill-caption span').on('click', function(){
        var thisIndex = $(this).index();
		fotorama.show(thisIndex);
    })
});