JSFiddle - React, Tailwind, and code Playground

by gavinfoley

HTML

<script src="https://dl.dropbox.com/u/30858395/Dev/MTA%20Redesign/js/resources/easySlider.js"></script>
<div id="banners">
                <ul id="banner-items">                  
                  
                  <li class="banner">
                    <img src="http://dl.dropbox.com/u/30858395/Dev/MTA%20Redesign/images/homepage-banner-1.jpg" alt="" />
                    <a href="http://google.com">
                        <div class="overlay-text blue-box">
                          <p>Prepare for night driving lorem ipsum doler sit amet consectetuer adipiscing</p>
                        </div>
                    </a>
                  </li>

                  <li class="banner">
                    <img src="http://dl.dropbox.com/u/30858395/Dev/MTA%20Redesign/images/homepage-banner-2.jpg" alt="" />                    
                  </li>

                  <li class="banner">
                    <img src="http://dl.dropbox.com/u/30858395/Dev/MTA%20Redesign/images/homepage-banner-3.jpg" alt="" />
                    <a href="http://google.com">
                        <div class="overlay-text blue-box">
                            <p>Prepare for night driving lorem ipsum doler sit amet consectetuer adipiscing</p>
                        </div>
                    </a>
                  </li>
                  
                  <li class="banner">
                    <img src="http://dl.dropbox.com/u/30858395/Dev/MTA%20Redesign/images/homepage-banner-4.jpg" alt="" />                    
                  </li>

                  <li class="banner">
                    <img src="http://dl.dropbox.com/u/30858395/Dev/MTA%20Redesign/images/homepage-banner-5.jpg" alt="" />                    
                  </li>

                </ul> <!-- /banner-items -->
</div>

CSS

#banners {
    width: 945px;
    margin: 12px auto 15px auto;
    position: relative;
    z-index: 1;
    height: 280px;
    overflow: hidden;
}
#banner-items {
    height: 280px;
    overflow: hidden;
    position: absolute;
    width: 10000px;
    padding: 0;
    margin: 0;
}

JavaScript

$('#banners').easySlider({
		prevClass: 'sliderPrev',
        nextClass: 'sliderNext',
		prevText: 'Previous',		
		nextText: 'Next',
		controlsShow: true,
		controlsBefore: '',
		controlsAfter: '',
		controlsFade: true,
		insertAfter: true,
		firstClass: 'firstBtn',
        lastClass: 'lastBtn',
		firstText: 'First',
		lastText: 'Last',
        firstShow: false,
		lastShow: false,
		vertical: false,
		speed: 2000,
		ease: 'swing',
		auto: true,
		pause: 3000,
		continuous: true,
		prevNext: true,
		numeric: true,
		numericClass: 'sliderControls'
 });