Hello,
I need some help. I have some code to create a slider. Now I want to add a counter functionality to what I currently have. (i.e. 1 of 9). Could someone help?
Thanks!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Plugin : Content Slider</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
(function($){
$.fn.imageSlider = function(options) {
var defaults = {
auto: null, //auto run the image slider. set to milliseconds
btnPrev: null, //pass in the element's class to create navigation button i.e. btnPrev: ".prev"
btnNext: null, //pass in the element's class to create navigation button i.e. btnNext: ".next"
btnGo: null, /*supply an array of selectors for each element in the image slider. The index
of the array represents the index of the element. If the first element in the
array is ".0", it means that when the element represented by ".0" is clicked,
the image slider will slide to the first element and so on. i.e. btnGo: [".0", ".1", ".2"]*/
easing: null, //the animation effect you want preformed. will take same values as "show" in jQuery
loop: true, //if set to true the images will continue to loop and not end
vertical: false,
visible: 3, //number of images to be displayed
scroll: 1, //scroll by this number of images
specUl: null,
speed: 400,
start: 0, //start at this image position (starts at 0)
//Callback funtions
beforeStart: null,
afterEnd: null
};
var options = $.extend(defaults, options);
return this.each(function() {
var running = false, animCss=options.vertical?"top":"left", sizeCss=options.vertical?"height":"width";
var div = $(this), ul = options.specUl ? $("ul" + options.specUl, div) : $("ul", div), liCollection = $("li", ul), liCollectionLen = liCollection.length, v = options.visible;
if(options.loop) {
ul.prepend(liCollection.slice(liCollectionLen-v-1+1).clone())
.append(liCollection.slice(0,v).clone());
options.start += v;
}
var li = $("li", ul), liLen = li.length, curr = options.start;
li.css({overflow: "hidden", float: options.vertical ? "none" : "left"});
ul.css({margin: "0", padding: "0", position: "relative", "z-index": "1", left: "0px"});
div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
var liSize = options.vertical ? li.outerHeight(true) : li.outerWidth(true); // Full li size(incl margin)-Used for animation
var ulSize = liSize * liLen; // size of full ul(total length, not just for the visible items)
var divSize = liSize * v; // size of div(total length for just the visible items)
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images
if(options.btnPrev)
$(options.btnPrev).unbind('click');
$(options.btnPrev).click(function(event) {
event.preventDefault();
return go(curr-options.scroll);
});
if(options.btnNext)
$(options.btnNext).unbind('click');
$(options.btnNext).click(function(event) {
event.preventDefault();
return go(curr+options.scroll);
});
if(options.btnGo)
$.each(options.btnGo, function(i, val) {
$(val).click(function() {
return go(options.loop ? options.visible+i : i);
});
});
if(options.auto)
setInterval(function() {
go(curr+options.scroll);
}, options.auto);
function vis() {
return li.slice(curr).slice(0,v);
};
function go(to) {
if(!running) {
if(options.beforeStart)
options.beforeStart.call(this, vis());
if(options.loop) { // If loop we are in first or last, then goto the other end
if(to<=options.start-v-1) { // If first, then goto last
ul.css(animCss, -((liLen-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==options.start-v-1 ? liLen-(v*2)-1 : liLen-(v*2)-options.scroll;
} else if(to>=liLen-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==liLen-v+1 ? v+1 : v+options.scroll;
} else curr = to;
} else { // If non-loop and to points to first or last, we just return.
if(to<0 || to>liLen-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , options.speed, "linear",
function() {
if(options.afterEnd)
options.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!options.loop) {
$(options.btnPrev + "," + options.btnNext).removeClass("disabled");
$( (curr-options.scroll<0 && options.btnPrev)
||
(curr+options.scroll > liLen-v && options.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};
});
};
})(jQuery);
</script>
<style type="text/css">
.slider {
overflow:auto
}
.slider .slider-window {
border:1px solid #ccc;
margin:0;
padding:10px 0 10px 10px;
float:left;
overflow:auto
}
.slider ul {
list-style:none;
margin:0;
padding:0;
}
.slider li {
border:1px solid #ccc;
margin-right:10px;
text-align:center;
width:100px;
}
.slider li a {
text-align:center;
text-decoration:none;
}
.slider li a img {
border:none;
margin-bottom:10px;
}
.slider .prev, .slider .next {
background:url(../images/slider-dir-arrows.gif) 0 0 no-repeat;
display:block;
height:32px;
float:left;
width:13px;
margin-top:65px;
outline:none
}
.slider .next {
background-position:0 -32px;
margin-left:10px
}
.slider .prev {
margin-right:10px
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.slider-window').imageSlider({
auto: false,
btnNext: ".next",
btnPrev: ".prev",
visible: 4,
scroll: 1,
loop: true
});
});
</script>
</head>
<body>
<div id="container">
<h4>Demo</h4>
<div>Counter: 1 of 9</div>
<br />
<div id="slider_name" class="slider textBlock"> <a href="#" class="prev">Previous</a>
<div class="slider-window">
<ul>
<li> Block 1 </li>
<li> Block 2 </li>
<li> Block 3 </li>
<li> Block 4 </li>
<li> Block 5 </li>
<li> Block 6 </li>
<li> Block 7 </li>
<li> Block 8 </li>
<li> Block 9 </li>
</ul>
</div>
<a href="#" class="next">Next</a> </div>
</div>
</body>
</html>
Before you post, read our: 
Add counter to jquery slider
