Home » jQuery, Tutorials » [Tutorial] jQuery Slider – Vertikal

      



Part 1

Text


Part 2

Text


Part 3

Text


Part 4

Text




      

       1
       2
       3
       4
	 

CSS

body {
	background-color:#f0f0f0;
}
#wrapper {
	width:960px;
	margin-left:auto;
	margin-right:auto;
	overflow:visible;
}

#slider {
	background-color:#3a3a3a;
	position:relative;
	padding:20px;
	overflow:hidden;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}
.content {
	width:920px;
	float: left;
	position: relative;
	background-color:#FFF;
}
.inslider a {
	text-decoration:none;
}
.contentholder {
	border: 1px solid #a9a9a9;
	height:300px;
	width: 920px;
	overflow: hidden;
	position: relative;
	background-color:#FFF;
}
.contentslider {
	position: absolute;
	top: 0; left: 0;
}
.imgslider img {
	float: left;
}
.contentnav {
	position: absolute;
	bottom: 30px; left:30px;
	 height:30px;
	z-index: 100;
	text-align: center;
	line-height: 30px;
	border: 1px solid #000;
	background-color: #fff;
	border: 1px solid #000;
}
.contentnav a {
	padding: 5px;
	text-decoration: none;
	color: #333;
}
.contentnav a.active {
	font-weight: bold;
	color:#FFF;
	background: #603;
}

JS und jQuery Einbinden

cunstom.js erweckt den Slider

//Breite der Seite
var contentwidth = $(>.contentholder>).width();
//Anzahl Seiten
var totalcontent = $(>.content>).size();
//Gesamt Breite aller Seiten
var allcontentwidth = contentwidth * totalcontent;
//Sliden und anpassen an die Breite
$(>.contentslider>).css({'width' : allcontentwidth});
//Die Funktion zum Sliden
rotate = function(){
//Anzahl der Slide Vorgänge
var slideid = $active.attr(>rel>) - 1;
//Die Distanz zum Sliden
var slidedistance = slideid * contentwidth;
//Löschen von der aktiven Klasse
$(>.contentnav a>).removeClass('active');
//Hinzufügen einer neuen aktiven Klasse
$active.addClass('active');
//Animation
$(>.contentslider>).animate({
        left: -slidedistance
    }, 500 );
}; 

//Zeit Einstellungen
rotation = function(){
play = setInterval(function(){
//Zum nächsten Blatt sliden
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Zum ersten Blatt sliden
$active = $('.contentnav a:first');
}
rotate();
//Timer
}, 5000);
};
//Return Funktion starten
rotation();
$(>.contentnav a>).click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});

Das war es auch, ich weiß etwas zu viel, aber einfach ausprobieren, und wenn was unklar ist, fragen!

Bis zum nächsten Mal!