JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<!-- #gallery.banner -->
    <div id="banner">
    </div>
<!-- /#gallery.banner -->

CSS

@charset "utf-8";
body { background: #FFCC99; }
/* Banner CSS (Conteiner) */
#banner {
    width: 550px;
    height: 229px;
    margin: 0 auto;
    box-shadow: -2px 15px 50px 10px #888888;
}
#banner img {
    width: 550px;
    height: 220px;
    border: 2px solid #DBDBDB;
    border-radius: 4px;

    padding: 4px;
    background-color: #F3F3F3;
}
#banner a {
    margin: 0;
    padding: 0;   
    text-decoration: none;
}
#banner a:active {
    margin: 0;
    padding: 0;   
    text-decoration: none;
}
#banner a:visited {
    margin: 0;
    padding: 0;   
    text-decoration: none;
}



/* Watermark CSS */
#banner .watermark {
    width: 99%;
    bottom: 0;
    padding: 4px 0 4px 6px;
    position: absolute;

    background: black;
    opacity: 0.8;
    font-family: Arial;
    border-radius: 0 0 4px 4px;
}
#banner .watermark .title {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.0em;
}
#banner .watermark .caption {
    color: #FFFFFF;
    font-weight: normal;
    font-size: 0.8em;
}



/*Pager CSS */
#banner ul#pager {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#banner ul#pager li { display: inline; }

#banner ul#pager li a {
    display:inline-block;
    width:12px;
    height:0;
    padding-top:12px;
    overflow:hidden;
    background-image:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png);
    background-position:0 0;
}
#banner ul#pager li.activeSlide a {
     background-position:0 -12px;  
}

JavaScript

var $banner = [{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_01.jpg",
    "caption": "Beautiful buildings",
    "link": "#",
    "title": "It's a beauty"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_02.jpg",
    "caption": "Most of our buildings have great outdoors",
    "link": "#",
    "title": "Don't like your current place?"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_03.jpg",
    "caption": "Spacious indoors",
    "link": "#",
    "title": "Need room?"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_04.jpg",
    "caption": "Great amenities",
    "link": "#",
    "title": "All you need"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_05.jpg",
    "caption": "Beautiful rooms",
    "link": "#",
    "title": "Nice place to live"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_06.jpg",
    "caption": "We have buildings with patios, pools, balcony and many other great features",
    "link": "#",
    "title": "Brag about your place"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_07.jpg",
    "caption": "Very close to USC",
    "link": "#",
    "title": "Distance matters"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_08.jpg",
    "caption": "Safe neighborhood, within DPS patrol",
    "link": "#",
    "title": "Safety first"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_09.jpg",
    "caption": "Pets are Ok (Some restrictions apply)",
    "link": "#",
    "title": "Pet friendly"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_10.jpg",
    "caption": "",
    "link": "#",
    "title": "Property 10"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_11.jpg",
    "caption": "",
    "link": "#",
    "title": "Property 11"},
{
    "image": "http://www.fchdata.com/beta/_img/home/banner/banner_12.jpg",
    "caption": "",
   ...