jQuery Slider

by katalin_2003

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="keyVisual">

<p id="loading"><span>Loading Content...</span></p>

<ul id="keySlide">
<li id="slideSplash">SPLASH: no pager control on this slide</li>
<li id="slide01"><a href="http://yahoo.com/"></a></li>
<li id="slide02">
    <div class="gchild">
        <p>grand child content, feedly is a google reader alternative you might want to think.</p>
        <a href="http://feedly.com/" class="link">feedly</a>
    </div>
</li>
<li id="slide03">
    <div class="gchild">
    <p>some grand child content3</p>
    <a href="http://yahoo.com" class="link" target="_blank">Yahoo</a>
    </div>
</li>
<li id="slide04">
    <div class="gchild">
    <p>some grand child content4</p>
    <a href="http://google.com" class="link" target="_blank">Google</a>
    </div>
</li>
</ul>

<div id="btnMoveNext" class="btnSlide"><a href="#">&raquo;</a></div>
<div id="btnMovePrev" class="btnSlide"><a href="#">&laquo;</a></div>
</div><!-- /#keyVisual -->

<!-- pager -->
<ul id="listTopKey" class="cf">
<li><a href="#slide01" class="no1">No.1</a></li>
<li><a href="#slide02" class="no2">No.2</a></li>
<li><a href="#slide03" class="no3">No.3</a></li>
<li><a href="#slide04" class="no4">No.4</a></li>
</ul>

CSS

/* reset */
ul,li {list-style: none;}

#loading {
    position: absolute;
    padding: 10px;
    background: #fff;
    color: #000;
}

/* slides */
#keyVisual,
#keySlide,
#keySlide li,
#keySlide li .gchild {
    width: 300px;
    height: 200px;
}
#keyVisual {
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
}
#keySlide,
#keySlide li {
    position: absolute;
}
#slideSplash {
    background: url(http://placekitten.com/300/200) no-repeat 0 0;
}
#slide01 {
    background: url(http://dummyimage.com/300x200/f00/fff.png) no-repeat 0 0;
}
#slide01 a {
    display: block;
    width: 300px;
    height: 200px;
}
#slide02 {
    background: url(http://dummyimage.com/300x200/f0f/f0f0f0.png) no-repeat 0 0;
}
#slide03 {
    background: url(http://dummyimage.com/300x200/00f/fff.png) no-repeat 0 0;
}
#slide04 {
    background: url(http://dummyimage.com/300x200/0f0/fff.png) no-repeat 0 0;
}
#keySlide li .gchild {
    display: none;
    z-index: 1000;
    position: relative;
    font-weight: bold;
    color: #fff;
}
#keySlide li .gchild .link {
    padding: absolute;
    display: block;
    width: 80px;
    right: 10px;
    bottom: 10px;
    color: #fff;
}

/* arrow btns */
.btnSlide {
    position: absolute;
    z-index: 2000;
    top: 90px;
}
.btnSlide a {
    display: block;
    width: 30px;
    height: 30px;
    background: #ccc;
    text-decoration: none;
    text-align: center;
    color: #fff;
}
#btnMoveNext {
    right: 0;
}

/* pager */
#listTopKey {
    width: 300px;
    overflow: hidden;
}
#listTopKey li {
    float: left;
    width: 60px;
    margin-right: 10px;
    text-align: center;
}
#listTopKey li a {
    display: block;
    height: 25px;
    background: #ccc;
    text-decoration: none;
    color: #fff;
}

JavaScript

/* 
    tSlider ver.0.5
    Date created: 2013-03-27
    Author: nor2tae
*/
$(function() {
	
	//variables
	var _loader = $('#loading');//loader id
	var _slideBody = $('#keySlide');//parent
	var _btnSlide = $('.btnSlide a');//arrow btns
	var _prev = '#btnMovePrev a', _next = '#btnMoveNext a';//arrow btn id
	var _pager = $('#listTopKey a');//pager btns
	var _w = 300, _hx;//parent width
	var _speed = 1000;//speed of slider animation
	var _interval = 5000;//hold time of each slider
	var _child = _slideBody.children('li'); //each slide
	var _childL = _child.length;//length of slide
	var _lBound = -_w * (_childL - 1); //calcurate left boudary
	var _timer;//timer variable
	var _imgURL;//variable for storing bgckground-img URL
	var _imgURLArr = [];//array for 
	var _imgCounter = 0;//img counter
	
	//loader Animation
	var loaderTimer = setInterval(function() {
		_loader.find('span').fadeTo(200,.4).fadeTo(200,1);
	}, 150);

	
	//Initial Alignment and Disabling pager
	var loadAlign = function() {
		_pager.addClass('disabled');
		_loader.fadeIn('fast');
		for(var i = 0; i < _childL; i++) {
			_hx = _w * i;
			_slideBody.children('li').eq(i).css('left', _hx);
		}
	};
	loadAlign();
	
	//slide timer
	var startTimer = function(el) {
		_timer = setInterval(function() {
			//check if current child holds grand child
			if(el) {
				el.children('.gchild').fadeOut('fast', function() {
					moveNext();
				});
			} else {
				moveNext();
			}
		}, _interval);
	};
	
	//Function to get current slide's ID then activate its pager
	//and if current slide contains grand child, fade it in.
	var idListener = function() {
		
		//to know whats the current slide and store its ID
		var _current = Math.round(_slideBody.position().left / _w);
		var _currentID = '#' + _slideBody.children('li').eq(-_current).attr('id');
		
		//pager control and grand child fade in
		_pager.removeClass('active');
		var _pagerCounter = 0;
		_pager.each(function() {
			_pagerCounter++;
			if($(this).attr('href') ===...