JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Slider Start -->
    <div id="slider" class="">
        <div id="slide-wrap">
        <ul>
            <li>html5</li>
            <li>Jquery</li>
            <li>css</li>
            <li>json</li>
            <li>slides</li>
            
        </ul>
        <div class="slide-controller"></div>
        </div>
    </div><!-- /slider -->

CSS

#slide-wrap {
    width:960px;
    height:100%;
    margin: 0 auto;
    position: relative;
}

#slider {
    width:100%;
    height:200px;
    color: white;
    background-color: #000;
    background-image: url('http://nitrous-networks.co.uk/webdev/images/sliderbg.png');
    background-repeat: no-repeat;
    background-position: center -200px;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
    position: relative;
}

#slider ul{
    width:960px;
    height:100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
#slider ul li {
    width:960px;
    height:200px;
}
.slide-controller {
    position: absolute;
    left: 3px;
    top: 50%;
    height: 150px !important;
    width:20px !important;
    margin-top: -75px;
    border-radius: 10px;
    background-color: #000;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
    background: rgb(22,22,22); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:...

JavaScript

$(document).ready(function() {
    var slidecount = 1;
    var slidepos = 0;
    var pos = ['-1', '-1', '199', '399', '599', '799', '999', '1199'];
    var slideid = 2;
    var Interval;
    var slideSpeed = 8000; //Milliseconds 

    // Turns Slider List Objects into the Controller blips & Applied Class's
    $('#slider li').each(function() {
        $('.slide-controller').append('<div data-slide="' + slidecount + '" class="blip inactiveslide"></div>');
        $(this).attr('id', 'slide-' + slidecount);
        slidecount++;
        $('.blip:first').removeClass('inactiveslide').addClass('currentslide');
        //message = 'list setup';
        //console.log(message);
    });

    slidecount = 1;

    // Change Slide Function


    function ChangeSlide(e) {
        slidepos = pos[e];
        var bgshift = slidepos * -1;
        bgshift = bgshift / 2;
        //scrolls to position
        $('#slider ul').animate({
            scrollTop: slidepos
        }, 1000);
        $('#slider').animate({
            'background-position-y': bgshift
        }, 1500);
        //remove old active button
        $('.currentslide').removeClass('currentslide').addClass('inactiveslide');
        //changes active button
        $('.blip[data-slide=' + e + ']').removeClass('inactiveslide').addClass('currentslide');
        slidepos++;
        //message = 'changeslide run! vars: slidepos='+slidepos+'';
        var message = 'rotatetimer: ' + RotateTimer + ' Interval:' + Interval + ' speed:' + slideSpeed;
        console.log(message);

    }

    //Controller Function
    $('.blip').live('click', function() {
        slideid = $(this).attr('data-slide');
        ChangeSlide(slideid);
        //message = 'clicked! slideid:'+slideid;
        //console.log(message);
        clearInterval(Interval);
        RotateTimer = setTimeout(GoGo, slideSpeed);
    });

    // Auto Rotate


    function Rotate() {
        var currentslide = $('.currentslide').attr('data-slide');
        var...