Slider.js

/********************************
******
******
******   This is the stupid simple slider.
******   @_ericmiller
******
******
*********************************/

(function($){
	'use strict';

	var StupidSimpleSlider = function(elem, options){
		//Here are your stupid simple options
		this.options = $.extend({
			speed: 500, //animation speed
			delay: 5000, //time between your stupid slides
			slideElem: '.slide', //tells me which stupid elements to look for.
			paginate: true, //turn on your stupid pagination
			paginateWrapper: '.pagination', //tell me where to put your stupid pagination
			paginateHtml: 'ul', //ul, divs, spans
			displayPageNum: false, //do you want me to display the number of the slide or naw?
			auto: true, //I guess if you really want your users to click through you can set this to false.
			swipe: false, //while this is a manual option you'll need (https://github.com/stephband/jquery.event.move) and (https://github.com/stephband/jquery.event.swipe)
			vertCenter: false //if you want your stupid slides to vertically center.
		}, options);

		//Here are your elements
		this.mainElement = elem;
		this.mainElementItems = this.mainElement.children(this.options.slideElem);
		this.slideMaxHeight = 0;
		this.totalWidth;
		this.howManyChildren = this.mainElementItems.length;
		this.autoTimer;

		//Your current slide, obvi it's 0
		this.current = 0;

		var _this = this; //deep link of StupidSimpleSlider

		_this.setup = function(){
			var totalWidth = (_this.howManyChildren*100)+'%'; //I assume you want this to be responsive, no reason to give you the option.

			//sets up parent div so you don't have to screw with CSS.
			_this.mainElement.css({'overflow': 'hidden', 'width':'100%'});

			//wrap your stupid slides in a wrapper so it doesn't mess with the main container
			_this.mainElementItems.wrapAll('<div class="slideContainer" style="width: '+totalWidth+'; position: relative; left: '+(_this.current*100) + '%"></div>');

			//setting width based on how many children there are. Always responsive.
			_this.mainElementItems.css({'width': (100/_this.howManyChildren) + '%', 'float': 'left'});

			//if you have pagination on, this'll set it up.
			if(_this.options.paginate){
				_this.setUpPagination();
			}

			//sets up your stupid auto slider
			if(_this.options.auto){
				_this.setUpAuto();
			}

			//  Swipe support
			if(_this.options.swipe){
				_this.setUpSwipe();
			}

			if(_this.options.vertCenter){
				_this.verticallyCenter();
			}
		};

		_this.setUpAuto = function(){
			_this.autoTimer = setInterval(function(){
				if(_this.current < _this.howManyChildren-1){
					var slideNum = _this.current+1;
					_this.change(slideNum);
				}else if(_this.current === _this.howManyChildren-1){
					var slideNum = 0;

					_this.change(slideNum);
				}
			}, _this.options.delay);
		};

		_this.setUpSwipe = function(){
			_this.mainElement.on('swipeleft', function(){
				//resets the timer so it does screw stuff up when you click.
				window.clearInterval(_this.autoTimer);
				_this.setUpAuto();

				if(_this.current < _this.howManyChildren-1){
					var slideNum = _this.current+1;
					_this.change(slideNum);
				}
			});
			_this.mainElement.on('swiperight', function(){
				//resets the timer so it does screw stuff up when you click.
				window.clearInterval(_this.autoTimer);
				_this.setUpAuto();

				if(_this.current <= _this.howManyChildren-1 && _this.current >= 1){
					var slideNum = _this.current-1;
					_this.change(slideNum);
				}
			});
		};

		_this.setUpPagination = function(){
			/******************
			****
			**** Please let it be known, I WILL NOT style the paging links for you. Do it yourself.
			****
			******************/
			var paginateHtml = '';

			switch(_this.options.paginateHtml){
				case "divs":
					paginateHtml += '<div class="pages">';
						for(var i=0; i<=_this.howManyChildren-1; i++){
								paginateHtml += '<div><a href="#" data-slide-num="'+i+'" class="'+((_this.options.pageItemClass !== undefined) ? _this.options.pageItemClass : '')+((_this.current === i) ? ' active' : '')+'">'+((_this.options.displayPageNum) ? (i+1) : '')+'</a></div>';
						}
					paginateHtml += '</div>';
				break;
				case "spans":
					paginateHtml += '<div class="pages">';
						for(var i=0; i<=_this.howManyChildren-1; i++){
							paginateHtml += '<span><a href="#" data-slide-num="'+i+'" class="'+((_this.options.pageItemClass !== undefined) ? _this.options.pageItemClass : '')+((_this.current === i) ? ' active' : '')+'"'+((_this.options.displayPageNum) ? (i+1) : '')+'</a></span>';
						}
					paginateHtml += '</div>';
				break;
				default:
					paginateHtml += '<ul class="pages">';
						for(var i=0; i<=_this.howManyChildren-1; i++){
							paginateHtml += '<li><a href="#" data-slide-num="'+i+'" class="'+((_this.options.pageItemClass !== undefined) ? _this.options.pageItemClass : '')+((_this.current === i) ? ' active' : '')+'"><i class="fa fa-circle-o"></i></a></li>';
						}
					paginateHtml += '</ul>';
				break;
			}

			$(_this.mainElement).find(_this.options.paginateWrapper).append(paginateHtml);
			_this.setUpPaginationActions();
			// $(_this.options.paginateWrapper)
		};

		_this.setUpPaginationActions = function(){
			$(_this.mainElement).find(_this.options.paginateWrapper).on('click', 'a', function(e){
				var slideNum = $(this).data('slide-num');

				//resets the timer so it does screw stuff up when you click.
				window.clearInterval(_this.autoTimer);
				_this.setUpAuto();

				_this.change(slideNum);

				e.preventDefault();
			})
		}

		_this.change = function(slide){
			var pages = $(_this.mainElement).find(_this.options.paginateWrapper).find('.pages').children();
			
			if(_this.current <= _this.howManyChildren-1 && _this.current !== slide){				
				_this.current = slide;

				$(_this.mainElement).find('.slideContainer').animate({
					left: -(_this.current*100)+'%'
				}, _this.options.speed);

				pages.find('.active').removeClass('active');
				pages.eq(_this.current).find('a').addClass('active');
			}
		};

		_this.verticallyCenter = function(){
			// console.log(_this.mainElement.height());
			// console.log(_this.mainElementItems.length);

			$.each(_this.mainElementItems, function(i){
				if(_this.mainElement.height() > $(this).height()){
					var height = ($(this).height() - _this.mainElement.height())/2;
					$(this).css({
						position: 'relative',
						top: -height
					})
				}
			});
		};

		//calls the set up function
		_this.setup();
	};

	$.fn.stupidsimpleslider = function(options){
		//making sure you actually have some stupid slides to init the slider.
		var childLength = this.children().length,
			howManySliders = this.length,
			instances = [];

		return this.each(function(i){
			var yourSlider = $(this);

			//initialize your stupid simple slider.
			if(childLength > 1){
				instances.push(new StupidSimpleSlider(yourSlider, options));
			}
		})
	};

})(window.jQuery);