JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div id="frameContainer">
    <div>
        <div class="left" id="imageGallery">
            <img src="http://lorempixel.com/175/100/sports" />
            <img src="http://lorempixel.com/175/100/animals" />
            <img src="http://lorempixel.com/175/100/" />
            
            <div id="buttons">
                <a href="#" data-class="1">1</a>
                <a href="#" data-class="2">2</a>
                <a href="#" data-class="3">3</a>
            </div>
        </div>
        <h1>Frame 1 content</h1>
    </div>
    <div>
        Frame 2 content
    </div>
    <div>
        Frame 3 content
    </div>
    <div>
        Frame 4 content
    </div>
</div>

<ul id="frameButtons">
    <li data-frame="1">Frame 1</li>
    <li data-frame="2">Frame 2</li>
    <li data-frame="3">Frame 3</li>
    <li data-frame="4">Frame 4</li>
</ul>

CSS

#frameContainer {
    width: 400px;
    height: 150px;
    background: #ddd;
}

#frameContainer > div {
    display: none;
    width: 100%;
    height: 100%;
    background: aqua;
}

#frameContainer div:first-child {
    display: block;
}



#frameButtons {
    padding: 0;
}

#frameButtons li {
    display: inline-block;
    width: 80px;
    list-style: none;
    text-align: center;
    background: #eee;
    cursor: pointer;
}

.left {
    width: 200px;
    float: left;
    background: red;
}

#buttons {
    display: inline-block;
}

#buttons a {
    display: block;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background: green;
}

#imageGallery {
    overflow: hidden;
}

#imageGallery img {
    display: none;
    float: left;
}

#imageGallery img:first-child {
    display: block;
}

@media (max-width: 300px) {
    .left {
        float: none;
        width: 100%;
    }

    #buttons {
        display: block;
    }

    #buttons a {
        display: inline-block;
    }

    #imageGallery img {
        float: none;
    }
}

JavaScript

var frameContainer = $('#frameContainer');
var inMotion = false;
var speed = 200;

$('#frameButtons li').on('click', function() {
    
    if (inMotion) return;
    
    inMotion = true;
    
    var $this = $(this);    
    var frameId = parseInt( $this.attr('data-frame') );
    
    frameContainer.find('div:visible').fadeOut(speed, function () {
        frameContainer.find('div').eq(frameId - 1).fadeIn(speed, function () {
            inMotion = false;
        });
    });
});

var galleryInMotion = false;

$('#buttons a').on('click', function() {
    if (galleryInMotion) return;
    
    galleryInMotion = true;
    
    var id = parseInt( $(this).attr('data-class') );
    
    $('#imageGallery img:visible').fadeOut(speed, function() {
        $('#imageGallery img').eq(id - 1).fadeIn(speed, function() {
            galleryInMotion = false;
        });
    });
});