JSFiddle - React, Tailwind, and code Playground

by Silvestrs Kante

HTML

<div id="hgal">
    <div class="arrow-container left-arrow">
        <div class="arrow left-arrow">
            <img src="http://i.imgur.com/mSBaciW.png" />
        </div>
    </div>
    <div class="image-wrap">
        <div class="image-container">
            <div class="image-list-container">
                <div class="image-list" style="width: 820px;"></div>
            </div>
        </div>
    </div>
    <div class="arrow-container right-arrow">
        <div class="arrow right-arrow">
            <img src="http://i.imgur.com/5ZEjwwn.png" />
        </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

* {
            box-sizing: border-box;
        }
        #hgal .left {
            position: absolute;
            z-index: 50;
            /*background-color: yellow;*/
            bottom: 0;
            left: 0;
            width: 50%;
            height: 10px;
        }
        #hgal .right {
            position: absolute;
            z-index: 50;
            /*background-color: green;*/
            bottom: 0;
            right: 0;
            width: 50%;
            height: 10px;
        }
        .image-box img {
            top: 50%;
            position: absolute;
            /*background-color: purple;*/
            cursor: pointer;
        }
        .image-box.normal {
            width: 120px;
            height: 180px;
        }
        .image-box.normal img {
            width: 120px;
            height: 120px;
            margin-top: -60px;
        }
        .image-box.mid {
            width: 150px;
            height: 180px;
        }
        .image-box.mid img {
            width: 150px;
            height: 150px;
            margin-top: -75px;
        }
        .image-box.large {
            width: 180px;
            height: 180px;
        }
        .image-box.large img {
            width: 180px;
            height: 180px;
            margin-top: -90px;
        }
        .image-box {
            height: 100%;
            margin: 0 5px;
            position: relative;
            float: left;
            /*background-color: yellow;*/
        }
        .image-list {
            height: 100%;
            position: absolute;
            top: 0;
            left: 360px;
            /*background-color: red;*/
            padding: 0 25px;
        }
        .image-wrap {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            bottom: 0;
            z-index: 5;
            height: 180px;
            margin-top: -90px;
        }
        .image-container {
            position: relative;
           ...

JavaScript

// Global vars
var clickTimer = false;
var clickCurrentPosition;
var gloablGallery = $("#hgal");

// Image JSON Array
var imagesData = [{
    img: "http://i.imgur.com/f0jkSv2.png",
    href: "#1"
}, {
    img: "http://i.imgur.com/kusvbGj.png",
    href: "#2"
}, {
    img: "http://i.imgur.com/pML7mYA.png",
    href: "#3"
}, {
    img: "http://i.imgur.com/O4DjbeK.png",
    href: "#4"
}, {
    img: "http://i.imgur.com/f0jkSv2.png",
    href: "#5"
}, {
    img: "http://i.imgur.com/f0jkSv2.png",
    href: "#5"
}, {
    img: "http://i.imgur.com/f0jkSv2.png",
    href: "#5"
}, {
    img: "http://i.imgur.com/f0jkSv2.png",
    href: "#5"
}, {
    img: "http://i.imgur.com/f0jkSv2.png",
    href: "#5"
}];

// Initiate gallery
initiateGalerry(gloablGallery, imagesData);

function initiateGalerry(gallery, imagesToLoad) {
    var options = {
        startPosition: 6, // n+1 actual position
        leftOffset: 360
    };

    clickCurrentPosition = options.startPosition;

    // Set Gallery Image list
    var imageListContainer = $(".image-list", gallery);

    // Check for asynchloaded images
    if (typeof imagesToLoad !== "undefined") {
        // Adjust container width
        imageListContainer.width((imagesToLoad.length * 130) + 60 + 60 + (imagesToLoad.length * 10));
        // Append images
        appendImages(imageListContainer, imagesToLoad);


    }

    // Attach event handlers for buttons
    $(gallery).on('click', '.arrow-container.left-arrow', function () {
        if (!clickTimer) {
            clickTimer = true;
            clickCurrentPosition = switchImage(gallery, clickCurrentPosition - 1, options);
            setTimeout(function () {
                clickTimer = false;
            }, 600);
        }
    });
    $(gallery).on('click', '.arrow-container.right-arrow', function () {
        if (!clickTimer) {
            clickTimer = true;
            clickCurrentPosition = switchImage(gallery, clickCurrentPosition + 1, options);
           ...