JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<div class='slides_container'>
	<div class='aFloor' style='display:none;'>
		<span class='left'>Ground Floor</span>
		<br/>
		<a href='#' class='imgXL'>
			<img src='http://placehold.it/500x438'/>
		</a>
		<br/>
        <a href="" class="prevFloor">
            <span class="prev_floor">
                <b>Show Prev Floor</b>
            </span>
        </a>
		<a href='' class='nextFloor'>
			<span class='next_floor'>
				<b>Show Next Floor</b>
			</span>
		</a>
		<a href='#' class='imgXL'>
			<span class='enlarge_floor'>
				<b>View Larger</b>
				<span class='elarge_icon'></span>
			</span>
		</a>
	</div>
	<div class='aFloor' style='display:none;'>
		<span class='left'>First Floor</span>
		<br/>
		<a href='#' class='imgXL'>
			<img src='http://placehold.it/500x438'/>
		</a>
		<br/>
        <a href="" class="prevFloor">
            <span class="prev_floor">
                <b>Show Prev Floor</b>
            </span>
        </a>
		<a href='' class='nextFloor'>
			<span class='next_floor'>
				<b>Show Next Floor</b>
			</span>
		</a>
		<a href='#' class='imgXL'>
			<span class='enlarge_floor'>
				<b>View Larger</b>
				<span class='elarge_icon'></span>
			</span>
		</a>
	</div>
</div>

CSS

html, body {
    height: 100%;width:100%;margin:0;padding:0;
}
.slides_container {
    min-width: 500px;
    max-width: 550px;
    max-height: 550px;
    overflow: hidden;
    margin-top: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    display: block;
    height:100%;
    width: 100%;
}
.slides_container span {
    color: #00661a;
    font-weight: 600;
    font-size: 1.2em;
}

JavaScript

jQuery('.slides_container div:first-child').show(); /*show the first slide */

jQuery('body').on('click', '.nextFloor', function(e){
    e.preventDefault();
    jQuery('.slides_container div:first-child').fadeOut()
    .next('div').fadeIn('slow')
    .end().appendTo('.slides_container');
});


jQuery('body').on('click', '.prevFloor', function(e){
    e.preventDefault();
    jQuery('.slides_container div:first-child').fadeOut()
    .next('div').fadeIn('slow')
    .end().appendTo('.slides_container');
});