JSFiddle - React, Tailwind, and code Playground

by power96

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body>

        <div class="container">


            <div class="row">                
                <div class="col-sm-4">
                    <div class="icon" id="icon-1">
                        <h1>image 1</h1>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="icon" id="icon-2">
                        <h1>image 2</h1>    
                    </div>

                </div>
                <div class="col-sm-4">
                    <div class="icon" id="icon-3">
                        <h1>image 3</h1>
                    </div>
                </div>
            </div>

            <hr class="featurette-divider">

            <div class="image-carousel">
                <div class="image-container" id="image-1" style="left: -110%">
                    <img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg" style="max-width:100%;" >
                </div>
                <div class="image-container" id="image-2">
                    <img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_02.jpg" style="max-width:100%;">
                </div>
                <div class="image-container" id="image-3" style="left: 110%">
                    <img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg" style="max-width:100%;">
                </div>  
            </div>
        </div>
    </body>

CSS

.featurette-divider {
    margin: 100px;
}

.icon{
    height: 100px;
    width: 100px;
    cursor: pointer;
    text-align: center;
}

.container{    
    position: relative;
}

.image-carousel{
    position: absolute;
    width: 97%;
    height: 100%;
    overflow: hidden;    
}

.image-container{
    height: 100%;
    width: 100%;    
    position:absolute;
}

JavaScript

var callback = function () {   
    
    if($(this).attr('id') === "icon-1"){
        $("#image-1").animate({left: '0%', opacity: '1'},{duration: 200, queue: false, });
        $("#image-2").animate({left: '110%', opacity: '0'},{duration: 200, queue: false, });
        $("#image-3").animate({left: '110%', opacity: '0'},{duration: 200, queue: false, });
    }
    else if($(this).attr('id') === "icon-2"){
        $("#image-1").animate({left: '-110%', opacity: '0'},{duration: 200, queue: false, });
        $("#image-2").animate({left: '0%', opacity: '1'},{duration: 200, queue: false, });
        $("#image-3").animate({left: '110%', opacity: '0'},{duration: 200, queue: false, });        
    }
    else if($(this).attr('id') === "icon-3"){
        $("#image-1").animate({left: '-110%', opacity: '0'},{duration: 200, queue: false, });
        $("#image-2").animate({left: '-110%', opacity: '0'},{duration: 200, queue: false, });
        $("#image-3").animate({left: '0%', opacity: '1'},{duration: 200, queue: false, });        
    }
}

var main = function() {  

    $('.icon').click(callback);    
}

$(document).ready(main);