JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script type="text/javascript" src="http://www.scottwidmer.com/bps/jquery.cycle.all.js"></script>
<div id="bannercontainer">
<div id="banner"> <a href="http://www.espn.com"><img src="http://www.scottwidmer.com/bps/images/banner1.gif" width="500" height="200" border="0" /></a>
  <a href="http://www.usatoday.com"><img src="http://www.scottwidmer.com/bps/images/banner2.gif" width="500" height="200" border="0" rel="" /></a>
<a href="http://www.google.com"><img src="http://www.scottwidmer.com/bps/images/banner3.gif" width="500" height="200" border="0" rel="" /></a>
<a href="http://www.apple.com"><img src="http://www.scottwidmer.com/bps/images/banner4.gif" width="500" height="200" border="0" rel="" /></a>
<a href="http://www.microsoft.com"><img src="http://www.scottwidmer.com/bps/images/banner5.gif" width="500" height="200" border="0" rel="" /></a>
</div>
</div>

CSS

#bannercontainer{
	width:500px;
	height:254px;
	position:relative;	
	overflow:hidden;
}
#banner{
	width:500px;
	height:200px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
}
#bannernav{
	width:500px;
	height:62px;
	position:absolute;
	z-index:100;
	bottom:0px;
	left:0px;
}
#bannernav #nav{
	/*width:500px;*/
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	padding:0px;
	position:absolute;
	left:0px;
	top:0px;
}
#bannernav #nav a{
	color:#fff;
	text-decoration:none;
	float:left;
	height:62px;
	display:block;
	width:125px;
	background:url(http://www.scottwidmer.com/bps/images/nav-back-off.png) no-repeat left bottom;
}
#bannernav #nav a:hover{
	color:#fff;
	text-decoration:none;
	float:left;
	height:62px;
	display:block;
	width:125px;
	background:url(http://www.scottwidmer.com/bps/images/nav-back-hover.png) no-repeat left bottom;
}
#bannernav #nav a.activeSlide{
	background:url(http://www.scottwidmer.com/bps/images/nav-back-on.png) no-repeat left bottom;
}
#bannernav #nav a h1{
	font-size:13px;
	font-weight:bold;
	padding:13px 0px 0px 5px;
	margin:0px;	
}
#bannernav #nav a p{
	font-size:10px;
	font-weight:normal;
	padding:0px 0px 0px 5px;
	margin:0px;
}
#bannernav #nav a.activeSlide h1{
	color:#0033CC;
}
#bannernav #nav a.activeSlide p{
	color:#000;
}
body {
	background-color: #FFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

JavaScript

$(document).ready(function () {
    var titles = ['<h1>Thumbnail1 Title</h1><p>Description</p>',
				  '<h1>Thumbnail2 Title</h1><p>Description</p>',
				  '<h1>Thumbnail3 Title</h1><p>Description</p>',
				  '<h1>Thumbnail4 Title</h1><p>Description</p>',
				  '<h1>Thumbnail5 Title</h1><p>Description</p>'];
    $('#banner').after('<div id="bannernav"><div id="nav"></div></div>').cycle({
        fx:     'turnUp,turnDown,turnLeft,turnRight,uncover,zoom,scrollUp,scrollDown,scrollLeft,scrollRight,fade,curtainX,curtainY', 
        timeout: 5000, 
        pager:  '#nav',
		pauseOnPagerHover: 1,
		pause: 1,
        pagerAnchorBuilder: function (index) {
            return '<a href="#">' + titles[index] + '</a>';
        },
		before: function (i) {
			var total = $('#banner').children().length;
			var currentSlideNo = $(i).index();
			var totalwidth = total * 125;
			var navwidth = $('#nav').outerWidth();
			var slideoffset = 2
			if(currentSlideNo > 0 && currentSlideNo < (total - slideoffset)){
				if(navwidth < totalwidth){
					$('#nav').animate({left: '-=125'});	
				}
			}
			else if(currentSlideNo == (total - slideoffset)){
				
			}
			else {
				$('#nav').animate({left: '0px'});
			}
		},
		onPagerEvent: function (i,el) {
			var total = $('#banner').children().length;
			var totalwidth = total * 125;
			var navwidth = $('#nav').outerWidth();
			//alert(navwidth + ' / ' + i + ' / ' + total);
			if(i > 1 && i < (total - 1)){
				if(navwidth < totalwidth){
					$('#nav').animate({left: '-=125'});	
				}
			}
			else if((i + 1) == total){
				
			}
			else {
				$('#nav').animate({left: '0px'});
			}
		}
    });
});