JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<div id="debug"></div>
<div id="page">
<div id="carousel">
    <img src="http://lorempixum.com/960/720" />
    <img src="http://lorempixum.com/960/720" />
    <img src="http://lorempixum.com/960/720" />
    <img src="http://lorempixum.com/960/720" />
    <img src="http://lorempixum.com/960/720" />
    <a class="carousel-ui" id="prev" href="#">&laquo;</a>
    <a class="carousel-ui" id="next" href="#">&raquo;</a>
</div>

</div>

CSS

#carousel{
width: 640px; height: 480px; margin: auto; position:relative;
}
#carousel img {position: absolute; left:0; top:0;}
.carousel-ui {position: absolute; top: 340px; z-index: 9999; display: block; width: 40px; height:40px; border: 3px solid white; border-radius: 25px; background-color: black; text-decoration: none; text-align: center; font: 50px/30px Georgia; outline: none; color: white}

#prev { left: -20px;}
#next { left: 940px;}

#transitions {width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
#transitions div { position: absolute; }

JavaScript

$(document).ready(function(){
    
    if ($("#carousel").find('img').length > 0) { log('found image'); } else { log('no image found'); }

    function log(s){
        $('#debug').append('<p>' + s + '</p>'); }
    
 (fu
    
    
    
});