Sliderota jQuery Plugin

The new design on Themes by bavotasan.com required a content slider so I built a simple jQuery plugin that would work the way I needed it to. There isn’t much to it but you can set the speed, slide timer, easing and if you want it to work solely as a content slider or as a slideshow. It even loops so you don’t have any of that ugly backwards sliding when it hits the end.

Here is the basic CSS you need:

#sliderota {
	width: 900px; /* change to the width you want */
	height: 380px; /* change to the height you want */
	overflow: hidden;
	position: relative;
	background: url(../images/bigad_bg.png) no-repeat;
	}
	
	#sliderota .slides {
		position: absolute;
		top: 0;
		left: 0;
		}
	
	#sliderota img {
		float: left;
		}
	
	#sliderota ul {
		position: absolute;
		bottom: 10px;
		left: 10px;
		z-index: 100;
		list-style: none;
		padding: 0;
		margin: 0;
		}
	
	#sliderota ul li  {
		float: left;
		}	
		
		#sliderota ul li a {
			background: url(../images/controls.png) no-repeat 0 0;
			width: 16px;
			height: 16px;
			display: block;
			}
			
		#sliderota ul li.selected a {
			background-position: -18px 0;
			}
			
	#sliderota .controls a {
		z-index: 100;
		position: absolute;
		right: 10px;
		bottom: 10px;
		background: url(../images/controls.png) no-repeat -54px 0;
		width: 16px;
		height: 16px;
		}
		
		#sliderota .controls a.play {
			display: none;
			background-position: -36px 0;
			}

Here is the basic HTML:

<div id="sliderota">
	<div class="slides">
    	<a href="http://themes.bavotasan.com/our-themes/premium-themes/moderno"><img src="images/moderno_bigad.png" width="900" height="380" alt="Moderno" /></a>
		<a href="http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium"><img src="images/magprem_bigad.png" width="900" height="380" alt="Magazine Premium" /></a>
		<a href="http://themes.bavotasan.com/our-themes/premium-themes/stationery"><img src="images/stationery_bigad.png" width="900" height="380" alt="Stationery" /></a>
		<a href="http://themes.bavotasan.com/our-themes/premium-themes/illustrious"><img src="images/illustrious_bigad.png" width="900" height="380" alt="Illustrious" /></a>
    </div>
</div>

Of course, you need to call jQuery and the plugin function:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderota.js"></script>
<script type="text/javascript">
	$("#sliderota").sliderota();
</script>

If you are only using jQuery 1.3.2, then you will also have to include the Easing plugin to use the advanced easing options that are included in the Core UI v1.8.0.

And now for the plugin:

/**
 * jQuery.sliderota
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 04/22/2010
**/
(function($) {
	$.fn.sliderota = function(options) {
		// setting the defaults
		// $("#sliderota").sliderota({speed: 3000, timer: 6000, slideshow: true, easing: "easeInOutQuint"});
		var defaults = {
			speed: 3000,
			timer: 6000,
			slideshow: true,
			easing: 'easeInOutQuint'
		};	
		var options = $.extend(defaults, options);
		
		// and the plugin begins
		return this.each(function() {
			// initializing the variables
			var loop, counter, obj, totalWidth, itemWidth, curLeft, itemNum, limit;

			// creating the object variable
			obj = $(this);
			
			counter = 0;
			itemWidth = obj.find(".slides").width();
			itemNum = obj.find(".slides a").length;
			totalWidth = (itemNum + 1) * itemWidth;
			limit = -(itemNum * itemWidth);

			obj
				.find(".slides").css({
					width: totalWidth+"px"
				})
				.end()
				.append("<ul></ul>")
				.find(".slides a").each(function() {
					$("<li><a href='javascript:void(0)' class='slide_"+counter+"'></a></li>").appendTo(obj.find("ul"));
					counter++;
				})
				.end()
				.find("ul li:eq(0)").addClass("selected")
				.end()
				.find(".slides a:eq(0)").clone().appendTo(" .slides", obj)
				.end()
				// creating the click event
				.find("ul li a").live('click', function() {
					obj.find("ul li").each(function() {
						$(this).removeClass("selected");
					});
					curLeft = $(this).attr('class').replace("slide_","");
					curLeft = -(curLeft * itemWidth);
					
					$(this).parent().addClass("selected");		
					obj // selecting the object
						.find(".slides").stop().animate({ left: curLeft+"px" }, options.speed, options.easing)
						.end()
						.find(".controls a.play").show()
						.end()
						.find(".controls a.pause").hide();
					clearTimeout(loop);
				});
			
			// slideshow functionality
			if(options.slideshow) {
				// adding the play/pause controls
				obj // selecting the object
					.append("<div class='controls'></div>")
					.find(".controls")
						.append("<a href='javascript:void(0)' class='play'></a>")
						.append("<a href='javascript:void(0)' class='pause'></a>")					
					.end()
					// creating the play click event
					.find(".controls .play").click(function() {
						loop = setTimeout(function() { moveSlides(); }, options.timer);
						$(this).hide();
						obj.find(".controls .pause").show();
					})
					.end()
					// creating the pause click event
					.find(".controls .pause").click(function() {
						clearTimeout(loop);
						obj.find(".controls .play").show();
						$(this).hide();
					});	
				
				// creating the loop for the slideshow
				loop = setTimeout(function() { moveSlides(); }, options.timer);
	
				// creating the function to move the slides
				function moveSlides() {
					obj.find("ul li").each(function() {
						$(this).removeClass("selected");
					})
					curLeft = obj.find(".slides").css('left').replace("px", "");
					curItem = (Math.abs(curLeft) / itemWidth)+1;
					if(curLeft==limit+itemWidth) {
						obj.find('ul li:eq(0)').addClass("selected");
					} else {
						obj.find('ul li a.slide_'+curItem).parent().addClass("selected");
					}
					curLeft = curLeft - itemWidth;
					obj.find(".slides").stop().animate({ left: curLeft+"px" }, options.speed, options.easing, function() {
						if(curLeft==limit) { obj.find(".slides").css({ left: "0px" }); }
					});
					loop = setTimeout(function() { moveSlides(); }, options.timer);
				};
			};
		});
	};
})(jQuery);

The options are pretty simple:

$("#sliderota").sliderota({
  speed: 3000, 
  timer: 6000, 
  slideshow: true, 
  easing: "easeInOutQuint"
});