JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<script src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/js/fadeSlideShow.js"></script>
<div id="slideshowWrapper">
    <ul id="slideshow">
        <li>
            <img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/4.jpg" width="640" height="480" border="0" alt="" />
        </li>
        <!-- This is the last image in the slideshow -->
        <li>
            <img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/3.jpg" width="640" height="480" border="0" alt="" />
        </li>
        <li>
            <img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/2.jpg" width="640" height="480" border="0" alt="" />
        </li>
        <li>
            <img src="http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/1.jpg" width="640" height="480" border="0" alt="" />
        </li>
        <!-- This is the first image in the slideshow -->
    </ul>
    <br clear="all" />
</div>

CSS

/**********************************************************/
#slideshowWrapper{position:relative;width:500px;margin-left:50px;}
#fssPrev{position:absolute;top:169px;left:-67px;background:url(http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/arrows.png) -67px 0px;width:67px;height:143px;text-indent:-999999px;}
#fssNext{position:absolute;top:169px;left:646px;background:url(http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/arrows.png) no-repeat;width:67px;height:143px;text-indent:-999999px;}
#fssPlayPause{position:absolute;top:435px;right:-130px;background:url(http://www.simplefadeslideshow.com/wp-content/themes/simplefadeslideshow_com/images/white.png) repeat;padding:4px 0 5px 0;-moz-border-radius:5px;border-radius:5px;width:60px;text-align:center;display:block;color:#333;text-decoration:none;}

ul#slideshow{list-style:none;border:1px solid #999;padding:2px;margin:auto;margin-top:5%;width:500px;height:480px;overflow:hidden;}

#fssList{list-style:none;width:646px;margin:auto;margin-left:80px;padding:5px 0 0 45%;}
#fssList li{display:inline;padding-right:10px;}
#fssList li a{color:#999;text-decoration:none;}
#fssList li.fssActive a{font-weight:bold;color:#333;}

JavaScript

$(document).ready(function () {
    $('#slideshow').fadeSlideShow();
});