JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.hpu.nl/libs/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://poplight.hpu.nl/js/jquery.nivo.slider.js"></script>
<div id="slider">
    <div id="photoSliderCaption">
       
    </div>
    <div id="photoSlider" class="nivoSlider">
        <img alt="" title="" src="http://poplight.hpu.nl/img/sliderPhoto.jpg" width="960" height="322">
        <img alt="" title="" src="http://poplight.hpu.nl/img/sliderPhoto2.jpg" width="960" height="322">
        <img alt="" title="" src="http://poplight.hpu.nl/img/sliderPhoto3.jpg" width="960" height="322">
        <img alt="" title="" src="http://poplight.hpu.nl/img/sliderPhoto4.jpg" width="960" height="322">
        <img alt="" title="" src="http://poplight.hpu.nl/img/sliderPhoto5.jpg" width="960" height="322">
        <img alt="" title="" src="http://poplight.hpu.nl/img/sliderPhoto6.jpg" width="960" height="322">
    </div>
    <div class="clear"></div>
</div>

CSS

#slider {
    height: 342px;
    margin: 50px 0 0 0;
}
    
    #photoSliderCaption {
        width: 305px;
        height: 18px;
        font-family: 'UniversCom-63BoldExt';
        font-size: 20px;
        padding: 12px 0;
        margin: 35px 0 0 0;
        z-index: 110;
    }
    
    #photoSlider {
        width: 960px;
        height: 322px;
        overflow: hidden;
    }
    
    .nivoSlider {
        position:relative;
        background:url(../img/nivoSlider/loading.gif) no-repeat 50% 50%;
    }
    .nivoSlider img {
        position:absolute;        
        display:none;
    }
    .nivoSlider a {
        border:0;
        display:block;
    }    
    .nivo-control {
        width: 11px !important;
        height: 8px !important;
        background: #FFF;
        margin: 0px 4px;        
        cursor: pointer;   
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px; 
    }          
        .nivo-controlNav .active {
            background-color:  #CBBB9D;
        }
               
    .nivo-controlNav {
       z-index: 230;
       position: absolute;
       width: 65px;
       height: 20px;
       margin: -52px 0 0 888px;       
}
/*
Skin Name: Nivo Slider Dark Theme
Skin URI: http://nivo.dev7studios.com
Description: A dark skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/

.theme-dark.slider-wrapper {
    background: #222;
    padding: 10px;
}
.nivoSlider {
    position:relative;
    background:#fff url(../img/nivoSlider/loading.gif) no-repeat 50% 50%;
    margin-bottom:10px;
    overflow: visible;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    text-align: left;
    padding: 0;
    position: relative;
}
.nivo-controlNav a {
    display:inline-block;    
    text-indent:-9999px;
    border:0;
}
.nivo-controlNav...

JavaScript

$(document).ready(function() {    
    $('#photoSlider').nivoSlider({
        effect: 'fade',
        animSpeed: 1000,
        pauseTime: 5000,
        directionNav: true,
        controlNav: true,
        pauseOnHover: true,
        randomStart: true
});
});