JSFiddle - React, Tailwind, and code Playground

by jeffory

HTML

<div class='slide_holder'>
    <div class='slide_inner'></div>
</div>

CSS

.slider_holder, .slide {
    width: 800px;
}
.slider_holder, .slide, .slide_inner {
    height: 500px;
}
.slide_inner {
    position: absolute;
    top: 0;
    left: 0;
}
.slide {
    position: absolute;
    top: 0;
    background-color: #171717;
    visibility: hidden
}
.slide:target {
    visibility: visible;
    transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
}
.slide:first-child {
    visibility: visible;
}
img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 97%;
    max-height: 97%;
    
    box-shadow: 0 0 10px #1A1A1A;
    -webkit-box-shadow: 0 0 10px #1A1A1A;
    -moz-box-shadow: 0 0 10px #1A1A1A;
}

JavaScript

$(function(){
    var request = $.ajax({
        url: 'http://chocolatebunnysex.tumblr.com/api/read/json?type=photo&num=50',
        dataType: 'jsonp'
    });
    
    request.done(function(data){
        var i = 0;
        $.each(data.posts, function(index, post){
            if (post.type == 'photo') {
                $('.slide_inner').append(
                    $('<a class="slide" href="#s' +(i+1)+ '" id="s' +i+ '">a</a>').html(
                        $('<img>').attr('src', post['photo-url-500'])
                    ).append(
                         $('<div class="slide_caption">').text(post['photo-caption'])
                    )
                );
            }
            i++;
        });
    });
});