de
Visit TemplateMonster
Submit a Ticket

Categories

de
Visit TemplateMonster Account
Submit a Ticket

Categories

MonsterONE Subscrioption

MonsterONE

jQuery ‘NivoSlider’

Template-help.com Team März 18, 2011
jQueryNivoSliderslider
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.
?
1
2
<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
?
1
2
3
$(window).load(function() {
         $('#slider').nivoSlider();    
});
Legen Sie auch ein paar zusätzliche Parameter fest
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.
?
1
2
3
4
5
6
7
8
9
10
<div id="slider">
    <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="" />
</div>
 
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

 

CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* 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;
}
2000 Premium WordPress Themes
Dieser Eintrag wurde um Slider, Arbeit mit jQuery Skripte geschrieben und jQuery, NivoSlider, slider markiert. Bookmarken Sie den permalink.

Ähnliche Beiträge

JS Animated. Wie ändert man die Geschwindigkeit des Sliders
Januar 27, 2020

Dieses Tutorial zeigt Ihnen, wie man die Geschwindigkeit des Übergangseffektes im JS Animated Templates anpasst. Normalerweise haben die JS Animated Templates den Slider, der TM_Slider heißt, und wie die andere jQuery-basierte Slider hat er eine Menge Einstellungen. Hier erfahren Sie, wie Sie ihn anpassen können. Öffnen Sie den Ordner vom JS Animated Template und gehen […]

Shopify. Wie man Slider-Einstellungen (Geschwindigkeit, Effekte, automatische Umschaltung von Slides) verwaltet
Januar 27, 2020

Von diesem Tutorial erfahren Sie, wie man Slider-Einstellungen in einer Shopify Vorlage verwaltet.

JS Animated. Wie ändert man die Geschwindigkeit, Übergangseffekte und andere Optionen des Sliders Camera
Januar 27, 2020

Wir stellen Ihnen mit Stolz das neue Video-Tutorial über Camera Slideshow vor. Es ist ein bekanntes jQuery Plugin.

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