JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://godspeed.sb-studio.co.uk/js/jquery.cycle.all.js"></script>
    <div id="slideshow">
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" />
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" />
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" />
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" />
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" />
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" />
        <img class="slide" src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" />
    </div>

CSS

#slideshow { 
    position: relative; 
    width: 475px; height: auto;
    margin-bottom: 10px;
}

.slide {
    width: 475px; height: auto !important;
}



#nav-slide-wrap { 
    position: relative;
    width: 450px; 
}

.nav-slide-wrap { 
    width: 185px; height: 170px; float: left; margin-right: 10px; margin-bottom: 10px;
}

.nav-slide { 
    width: 185px; height: 170px;
    border: none; display: block;
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript

$('#slideshow').after('<div id="nav-slide-wrap">').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav-slide-wrap', 
     
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<div class="nav-slide-wrap"><a href="#"><div class="nav-slide" style="background-image: url(' + slide.src + ')" /></a></div>';
    } 
});