JSFiddle - React, Tailwind, and code Playground

HTML

<div class="media">
    <ul id="image_slider">
        <li>
            <img class="media_img" src="https://www.drupal.org/files/images/druplicon-polska-small.png" alt="" />
        </li>
        <li>
            <img class="media_img" src="http://www.metastatic.org/images/gnu-crypto/gnu-crypto-2-small.png" alt="" />
        </li>
        <li>
            <img class="media_img" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png" alt="" />
        </li>
        <li>
            <img class="media_img" src="https://www.resiprocate.org/images/8/81/Symbol-warning-small.png" alt="" />
        </li>
        <li>
            <img class="media_img" src="http://wiki.sugarlabs.org/images/7/7e/Gentoo-small.png" alt="" />
        </li>
    </ul>
    <div class="media_full">
        <div class="img_view">
            <img id="img" src="" alt="" />
        </div>
        <button class="prev" id="prev" type="button">◀</button>
        <button class="next" id="next" type="button">▶</button>
        <button class="view_close" type="button">close view</button>
    </div>
</div>

CSS

.media {
    position: relative;
    width: 100%;
    height: 150px;
}
.media ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.media ul li {
    height: 100%;
    display: inline-block;
    list-style: none;
}
.media ul li img {
    width: auto;
    height: 100%;
    cursor: pointer;
}
.media_full {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
.prev {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bold;
}
.next {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bold;
}
.view_close {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 50px;
    font-size: 2em;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 30px;
}
.img_view {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    width: auto;
    height: 100%;
}
.img_view img {
    display: block;
    margin: 0px auto;
    height: 100%;
}
.prev {
    position: absolute;
    left: 0;
}
.next {
    position: absolute;
    right: 0;
}

JavaScript

$('.media_full').hide();

$('.media').ready(function () {
    $('.media_img').click(function () {
        var currImg = $(this);
        var numImage = $('#image_slider').children().length;
        var total = numImage;
        var src = $(this).attr('src');

        //window.alert(numImage);

        $('.media_full').fadeIn(500);
        $('.img_view img').attr('src', src);

        $('.prev').off('click').click(function () {
            if ($(currImg).closest('li').prev().find('.media_img').length) {
                $(currImg).closest('li').prev().find('.media_img').trigger('click');
            }
            else{
                $('.media_img:last').trigger('click');
            }

        });

        $('.next').off('click').click(function () {
            if ($(currImg).closest('li').next().find('.media_img').length) {
                $(currImg).closest('li').next().find('.media_img').trigger('click');
            }
            else{
                $('.media_img:first').trigger('click');
            }
        });

    });
    $('.view_close').click(function () {
        $('.media_full').fadeOut(500);
    });
});