Slider

Content Slider

by gandjyar

HTML

<div class="main">
				<div id="mi-slider" class="mi-slider">
					<ul>
						<li class="tab1"><h4>Tab 1 content</h4></li>
					</ul>
					<ul>
						<li class="tab2"><h4>Tab 2 content</h4></li>
						</ul>
					<ul>
						<li class="tab3"><h4>Tab 3 content</h4></li>
					</ul>
					<ul>
						<li class="tab4"><h4>Tab 4 content</h4></li>
					</ul>
					<nav>
						<a href="#" class="navtab1"><h1>Tab 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet, purus quis tincidunt condimentum, nibh dui dapibus est, a lobortis nisl magna nec enim. </p></a>
						<a href="#" class="navtab2"><h1>Tab 2</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet, purus quis tincidunt condimentum, nibh dui dapibus est, a lobortis nisl magna nec enim. </p></a>
						<a href="#" class="navtab3"><h1>Tab 3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet, purus quis tincidunt condimentum, nibh dui dapibus est, a lobortis nisl magna nec enim. </p></a>
						<a href="#" class="navtab4"><h1>Tab 4</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet, purus quis tincidunt condimentum, nibh dui dapibus est, a lobortis nisl magna nec enim. </p></a>
					</nav>
				</div>
			</div>
		<script>
			$(function() {
				$( '#mi-slider' ).catslider();
			});
		</script>

CSS

.tab1 {background:#A90000;width:100%;height:300px;color:#fff}
.tab2 {background:#2D4186;width:100%;height:300px;}
.tab3 {background:#ccc;width:100%;height:300px;}
.tab4 {background:#000;width:100%;height:300px;}

.mi-slider {
	position: relative;
height:600px;
	width:100%;
}

.mi-slider ul {
	list-style-type: none;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 300px;
	overflow: hidden;
	text-align: center;
	pointer-events: none;
}


.mi-slider ul.mi-current {
	pointer-events: auto;
}

.mi-slider ul li {
	display: inline-block;
	padding: 20px;
	width: 100%;
	max-width: 100%;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}


.mi-slider ul li a,
.mi-slider ul li img {
	display: block;
	margin: 0 auto;
}

.mi-slider ul li a {
	outline: none;
	cursor: pointer;
}

.mi-slider ul li img {
	max-width: 100%;
	border: none;
}

.mi-slider ul li h4 {
	display: inline-block;
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	padding: 20px 10px 0;
}



.mi-slider nav {
	position: relative;
	top: 300px;
	text-align: center;
	max-width: 100%;
	margin: 0 auto;

}

.mi-slider nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding: 40px 30px 30px 34px;
	position: relative;
	color: #555;
	outline: none;
	-webkit-transition: color 0.2s linear;
	transition: color 0.2s linear;
	background: #333;
	width:300px; float:left;
}


 .mi-slider nav a.navtab1.mi-selected  {
	color: #fff!important;
	background:#A90000!important;
}
 .mi-slider nav a.navtab2.mi-selected  {
	color: #fff!important;
	background:#2D4186!important;
}
 .mi-slider nav a.navtab3.mi-selected  {
	color: #fff!important;
	background:#ccc!important;
}
 .mi-slider nav a.navtab4.mi-selected  {
	color: #fff!important;
	background:#000!important;
}

/* Move classes and animations...

JavaScript

;( function( $, window, undefined ) {

		'use strict';

	$.CatSlider = function( options, element ) {
		this.$el = $( element );
		this._init( options );
	};

	$.CatSlider.prototype = {

		_init : function( options ) {

			// the categories (ul)
			this.$categories = this.$el.children( 'ul' );
			// the navigation
			this.$navcategories = this.$el.find( 'nav > a' );
			var animEndEventNames = {
				'WebkitAnimation' : 'webkitAnimationEnd',
				'OAnimation' : 'oAnimationEnd',
				'msAnimation' : 'MSAnimationEnd',
				'animation' : 'animationend'
			};
			// animation end event name
			this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
			// animations and transforms support
			this.support = Modernizr.csstransforms && Modernizr.cssanimations;
			// if currently animating
			this.isAnimating = false;
			// current category
			this.current = 0;
			var $currcat = this.$categories.eq( 0 );
			if( !this.support ) {
				this.$categories.hide();
				$currcat.show();
			}
			else {
				$currcat.addClass( 'mi-current' );
			}
			// current nav category
			this.$navcategories.eq( 0 ).addClass( 'mi-selected' );
			// initialize the events
			this._initEvents();

		},
		_initEvents : function() {

			var self = this;
			
			var changeTime = 5000;
var actualCat = 0
setInterval(function() {
self.showCategory(actualCat);

if(actualCat < $('#mi-slider ul').length - 1) {
actualCat++;
}else {
actualCat = 0;
}
}, changeTime);
			
			
			
			
			this.$navcategories.on( 'click.catslider', function() {
				self.showCategory( $( this ).index() );
				return false;
			} );

			// reset on window resize..
			$( window ).on( 'resize', function() {
				self.$categories.removeClass().eq( 0 ).addClass( 'mi-current' );
				self.$navcategories.eq( self.current ).removeClass( 'mi-selected' ).end().eq( 0 ).addClass( 'mi-selected' );
				self.current = 0;
			} );

		},
		showCategory : function( catidx ) {

			if( catidx === this.current || this.isAnimating )...