Categories

jQuery ‘NivoSlider’

Template-help.com Team März 18, 2011
Rating: 3.3/5. From 4 votes.
Please wait...
Einen Image Slider mit einer Menge einzigartige Wechseleffekten. Für mehr Information über diesen Slider gucken Sie die offizielle Website http://nivo.dev7studios.com

 

JavaScript

Fügen Sie jQuery Framework und jquery.nivo.slider.pack.js mit src-Attribute im Script-Tag den .js Dateien ein.
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
Im Abschnitt des Dokuments geben Sie ein Initialisierungsskript
$(window).load(function() {
         $('#slider').nivoSlider();     
});
Legen Sie auch ein paar zusätzliche Parameter fest
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500,
        pauseTime:3000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){} //Triggers after all slides have been shown

 

HTML

Nachfolgend gibt es den ganzen HTML-Skript. Um eine Bildunterschrift hinzuzufügen, geben Sie einfach einen Titel-Attribute des Bilds. Um ein HTML Caption(Bildunterschrift) hinzuzufügen, legen Sie den Titel-Attribut von ID des Elements, das Ihre Bildunterschrift (mit „hash“) hat. Beachten Sie, dass das HTML-Element mit Ihrer Bildunterschrift die CSS-Klasse mit nivo-html- caption haben und außer den Slider-div sein muss.
<img src="images/slide1.jpg" alt="" /> <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" />
This is an example of a HTML caption with a link.

 

CSS

/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}
Dieser Eintrag wurde um Slider, Arbeit mit jQuery Skripte geschrieben und jQuery, NivoSlider, slider markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten