Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Question Add counter to jquery slider

    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>

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    353
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Hi,
    If this one is what you are looking for,

    Code:
    ...
    				}
    				var dummy=curr;
    				if (dummy==0)
    				  dummy=liCollectionLen;
    				else 
    				  if (dummy>liCollectionLen) 
    				    dummy-=liCollectionLen;
    				document.getElementById("counter").innerHTML=dummy;
    				return false;
    			};
    		});
    	};
    	
    })(jQuery);
    </script>
    ...
    then let me know the jQuery's way,
    I am interested to learn...

    Code:
    ...
    <h4>Demo</h4>
      <div>Counter: <span id="counter">1</span> of 9</div>
      <br />
      ...
    Regards,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •