JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="media">
   
        <span class="prev"><</span>
        <span class="next">/ ></span>
  
    <ul class="gallery" id="olympGallery">
        <li><img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc1/247981_508661469163044_985952989_n.jpg" alt="" title="" /></li>
        <li><img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/72097_531313146897876_38653023_n.jpg" alt="" title="" /></li>
        <li><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc1/578950_518681738161017_888725050_n.jpg" alt="" /></li>
    </ul>
</div>

CSS

.prev, .next {position: relative; padding: 3px; font-size:50px; font-weight: 900; cursor:pointer;
}

.gallery li{display:none; list-style:none;}
.gallery li:first-child {display:block;}

.gallery img {
    max-height:550px
}

JavaScript

var speed = 1000;

    $(".prev").click(function() {
        var now = $("ul.gallery").children(":visible"),
            last = $("ul.gallery").children(":last"),
            prev = now.prev();
            prev = prev.index() == -1 ? last : prev;
        now.fadeOut(speed, function() {prev.fadeIn(speed);});
    });

    $(".next").click(function() {
        var now = $("ul.gallery").children(':visible'),
            first = $("ul.gallery").children(':first'),
            next = now.next();
            next = next.index() == -1 ? first : next;
        now.fadeOut(speed, function() {next.fadeIn(speed);});
    });

    $(".gallery li").click(function() {
        var first = $(this).parent().children(':first'),
            next = $(this).next();
            next = next.index() == -1 ? first : next;
        $(this).fadeOut(speed, function() {next.fadeIn(speed);});
    });