JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<div id="slideShow">
            
            <div id="leftThumbs">
                <a href="javascript:void(0)" id="slide1" class="thumb thumb1"></a>
                <a href="javascript:void(0)" id="slide2" class="thumb thumb2"></a>
                <a href="javascript:void(0)" id="slide3" class="thumb thumb3"></a>
                <a href="javascript:void(0)" id="slide4" class="thumb thumb4"></a>
            </div>
            
            <div id="slides">
                <img src="http://www.lukepeters.me/imagesliceslide/slide1.png" alt="" class="slide1" />
                <img src="http://www.lukepeters.me/imagesliceslide/slide2.png" alt="" class="slide2" />
                <img src="http://www.lukepeters.me/imagesliceslide/slide3.png" alt="" class="slide3" />
                <img src="http://www.lukepeters.me/imagesliceslide/slide4.png" alt="" class="slide4" />
            </div>
            
        </div>

CSS

body {
    margin: 20px 20px 0;
    font-family: Tahoma, Verdana, Arial, Sans;
    font-size: 13px;
    color: #333333;
    background: #eeeeee;
}

div#slideShow {
    margin: 50px 0 0 70px;
    width: 550px;
    height: 250px;
    overflow: hidden;
    background: #f9f9f9;
}

div#leftThumbs {
    position: relative;
    z-index: 10;
    width: 150px;
    height: 248px;
    float: left;
}

div#slides {
    position: relative;
    z-index: 5;
    width: 400px;
    height: 250px;
    float: right;
}

div#slides img {
    position: absolute;
    display: none;
}

div.imgLeft {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
}

div.imgRight {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
}

a.thumb {
    width: 150px;
    height: 63px;
    display: block;
    -moz-box-shadow:inset 0 0 20px rgba(0,0,0,0.6);
}

a.thumb:hover {
    -moz-box-shadow:inset 0 0 30px rgba(0,0,0,0.6);
}

a.thumb:active {
    -moz-box-shadow:inset 0 0 40px rgba(0,0,0,0.6);
}

a.thumb:focus {
    outline: none;
}

a.thumb1 {
    background: blue;
}

a.thumb2 {
    background: green;
}

a.thumb3 {
    background: pink;
}

a.thumb4 {
    background: yellow;
}

JavaScript

$('#slides img:first').addClass('current').show();

            $('#slides').append('<div class="imgLeft"></div><div class="imgRight"></div>');

            function setDivBgs() {
                var currentImgBg = $('.current').attr('src');
                $('.imgLeft').css({
                    'left': '0px',
                    'backgroundImage': 'url("' + currentImgBg + '")'
                });
                $('.imgRight').css({
                    'right': '0px',
                    'backgroundImage': 'url("' + currentImgBg + '")',
                    'backgroundPosition': 'top right'
                });
            }

            setDivBgs();

            $('.thumb').click(function() {

                if (!$(this).hasClass('active')) {
                    var slideToShow = '.' + $(this).attr('id');
                    //alert(slideToShow);

                    $('.thumb').removeClass('active');
                    $(this).addClass('active');
                    
                    $('.current').hide().removeClass('current');
                    $(slideToShow).show().addClass('current');

                    $('.imgLeft').stop().animate({
                        'left': '-70%'
                    }, 300);
                    $('.imgRight').stop().animate({
                        'right': '-30%'
                    }, 300);

                    setTimeout(setDivBgs, 400);
                }

            });