//Cassie Titus 12-23-2013 //Requires jQuery //This creates a very simple looking slider that is responsive. var simpleSlider = {}; //You can have multiple sliders on a page. This array will have a reference object for each of them //in the order they were created. simpleSlider.activeSliders = []; //simpleSlider.create({"container":".homeSlider","width":"800px","height":"320px","itemSize":"150px","timer",5000, "arrowColor":"#ad97c8"}) simpleSlider.create = function(options){ var slider = {}; slider.height = options["height"]?options["height"]:"200px"; //How tall should the slider be? slider.width = options["width"]?options["width"]:"auto"; //Maximum width for the slider plus arrows //Set this if you're showing fixed width banners or other content that has fixed chunks. //It makes the scrolling smoother slider.itemSize = options["itemSize"]?options["itemSize"]:"0px"; //Set the timer for the slider. How long before it moves to the next slide. In ms //If you don't want the slider to rotate, pass in false slider.timer = options["timer"]?options["timer"]:8000; if(!slider.timer) slider.timerOn = false; else slider.timerOn = true; //The selector of the wrapper for the content that you want to slide. ex. $j("#exampleSlider") slider.container = options["container"]?options["container"]:"
"; //The color of the arrows. Defaults to a bright "fgmarket" green. slider.color = options["arrowColor"]?options["arrowColor"]:"#8bc640"; //Calculate the slider height. var realHeight = $j(slider.container).height(); if(realHeight < slider.height.match(/\d+/)[0]) slider.height = realHeight + "px"; //Arrows are 10% of the width of the content, and are a part of the total. var currentContentWidth = $j(slider.container).outerWidth(true); var arrowWidth = Math.ceil((currentContentWidth * .05) / 1); var arrowHeight = Math.ceil(slider.height.match(/\d+/)[0] / 4); slider.contentWidth = currentContentWidth; //Set the important styles on the container $j(slider.container).css({"height":slider.height,"display":"inline-block","position":"absolute","top":"0","left":"0"}); //Move the slider to the next available content chunk slider.next = function ( event ) { var position = 0; if(this.chunkCounter < this.numChunks-1){ this.chunkCounter++; position = this.chunkSize * this.chunkCounter; }else{ this.chunkCounter = 0; } //$j(this.container).css("left","-"+position+"px"); $j(this.container).stop().animate({"left":"-"+position+"px"},2000,"easeOutQuint"); if(this.timerOn) this.startSlidesProxy(this.timer); } //Move the slider to the previous content chunk slider.previous = function( event ) { var position = this.chunkSize * (this.numChunks - 1); if(this.chunkCounter > 0){ this.chunkCounter--; position = this.chunkSize * this.chunkCounter; }else{ this.chunkCounter = this.numChunks-1; } //$j(this.container).css("left","-"+position+"px"); $j(this.container).stop().animate({"left":"-"+position+"px"},2000,"easeOutQuint"); if(this.timerOn) this.startSlidesProxy(this.timer); } //Move the slider slowly and smoothly to the right slider.panRight = function (event){ this.nextButton.css("border-left-color",slider.color); } //Move the slider slowly and smoothly to the left slider.panLeft = function (event){ this.previousButton.css("border-right-color",slider.color); } //Stop the slider from moving slider.stopSlides = function (event){ this.nextButton.css("border-left-color","#DDDDDD"); this.previousButton.css("border-right-color","#DDDDDD"); this.timerOn = false; window.clearTimeout(this.timeoutId); } //Start the slider moving slider.startSlides = function (timer){ this.timerOn = true; window.clearTimeout(this.timeoutId); this.timeoutId = setTimeout(this.nextProxy, timer); } //Proxy all of the functions so that slider is the variable in "this" and not whatever we're taking the action on slider.nextProxy = $j.proxy(slider.next, slider); slider.previousProxy = $j.proxy(slider.previous, slider); slider.panRightProxy = $j.proxy(slider.panRight, slider); slider.panLeftProxy = $j.proxy(slider.panLeft, slider); slider.stopSlidesProxy = $j.proxy(slider.stopSlides, slider); slider.startSlidesProxy = $j.proxy(slider.startSlides, slider); //Make a wrapper for all the controls and content var wrapper = $j(""); wrapper.css({"position":"relative","white-space":"nowrap"}); //Attach the wrapper $j(slider.container).wrap(wrapper); //The wrapper that was attached is actually a clone, so get the real one now that it's in the dom slider.wrapper = $j(slider.container).parent(); //Add the previous button var previousButton = $j(''); previousButton.css({"width":"0px","height":"0px","border-top":arrowHeight + "px solid transparent","border-bottom":arrowHeight + "px solid transparent","border-right":arrowWidth + "px solid #DDDDDD","display":"inline-block","vertical-align":"middle","cursor":"pointer"}); slider.wrapper.prepend(previousButton); //We want to make sure we have the real object and not a clone. //use the proxy version of the event functions so you get the whole slider and not just the button reference slider.previousButton = $j($j(slider.wrapper).find(".simpleSlider_previous")[0]); slider.previousButton.click(slider.previousProxy); slider.previousButton.hover(slider.panLeftProxy,slider.stopSlidesProxy); //Add the next button. var nextButton = $j(''); nextButton.css({"width":"0px","height":"0px","border-top":arrowHeight + "px solid transparent","border-bottom":arrowHeight + "px solid transparent","border-left":arrowWidth + "px solid #DDDDDD","display":"inline-block","vertical-align":"middle","cursor":"pointer"}); slider.wrapper.append(nextButton); //We want to make sure we have the real object and not a clone. //use the proxy version of the event functions so you get the whole slider and not just the button reference slider.nextButton = $j($j(slider.wrapper).find(".simpleSlider_next")[0]); slider.nextButton.click(slider.nextProxy); slider.nextButton.hover(slider.panRightProxy, slider.stopSlidesProxy); //Make a wrapper around just the inner content area that's the same size as the content. //This is so we can move the content around inside of it to give the illusion of sliding. var viewWindow = $j(""); viewWindow.css({"overflow":"hidden","max-width":slider.width,"height":slider.height,"display":"inline-block","vertical-align":"middle","width":"90%","position":"relative"}); $j(slider.container).wrap(viewWindow); slider.viewWindow = $j($j(slider.wrapper).find(".simpleSlider_viewWindow")[0]); //If an itemSize was given, we want the view window to smartly show the items //not clip one in half etc. if(slider.itemSize != "0px"){ var numItems = Math.floor(slider.viewWindow.innerWidth() / slider.itemSize.match(/\d+/)[0]); slider.viewWindowWidth = numItems * slider.itemSize.match(/\d+/)[0]; slider.viewWindow.css("width",slider.viewWindowWidth); } if(slider.timer) slider.startSlidesProxy(slider.timer); slider.chunkSize = slider.viewWindow.innerWidth(); slider.numChunks = Math.ceil(Math.floor(slider.contentWidth) / slider.chunkSize); slider.chunkCounter = 0; simpleSlider.activeSliders.push(slider); simpleSlider.redraw(); } //Redraw all the sliders on the page. This mainly adjusts the arrows to be appropriate sizes and recalculates chunks. simpleSlider.redraw = function(){ $j(simpleSlider.activeSliders).each(function(){ this.viewWindow.css("width","90%"); if(this.itemSize != "0px"){ var numItems = Math.floor(this.viewWindow.innerWidth() / this.itemSize.match(/\d+/)[0]); this.viewWindowWidth = numItems * this.itemSize.match(/\d+/)[0]; this.viewWindow.css("width",this.viewWindowWidth); } //Arrows are 10% of the width of the content, and are a part of the total. var currentContentWidth = $j(this.viewWindow).outerWidth(true); var arrowWidth = Math.ceil((currentContentWidth * .05) / 1); this.previousButton.css("border-right",arrowWidth + "px solid #DDDDDD"); this.nextButton.css("border-left",arrowWidth + "px solid #DDDDDD"); var chunkSize = this.viewWindow.innerWidth(); var numChunks = Math.ceil(Math.floor(this.contentWidth) / this.chunkSize); this.chunkSize = chunkSize; this.numChunks = numChunks; if(numChunks == 1){ this.previousButton.css("display","none"); this.nextButton.css("display","none"); }else{ this.previousButton.css("display","inline-block"); this.nextButton.css("display","inline-block"); } //Reset to 0 this.chunkCounter = 0; $j(this.container).position({ of: this.viewWindow, my: "left top", at: "left top" }); }); }