Share
Als nächstes in der Premium Pixels-Session befinden sich die Bildschieberegler von Orman. Wir nehmen die PSD, bauen sie für den Browser neu auf und machen das Ganze mit dem brillanten Nivo Slider jQuery Plugin funktionsfähig.
Um alles in Ordnung zu halten, erstellen wir zuerst unsere Ordnerstruktur. Erstellen Sie drei Ordner mit den Namen "css", "images" und "js". Der CSS-Ordner enthält unser Stylesheet. Images ist für gut Bilder, und js wird unsere jQuery-Plugins enthalten - in diesem Fall den Nivo-Slider!
Okay, wir haben unsere Ordnerstruktur, jetzt müssen wir unser HTML-Dokument erstellen. Erstellen Sie dies im Stammverzeichnis Ihres Projekts. Wir verwenden eine einfache HTML5-Basisvorlage und verknüpfen auch die von Google gehostete jQuery-Bibliothek.
Bildschieberegler
Wir werden mit einigen Reset-Styles loslegen:
html, körper, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, groß, zitieren, code, em, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, ich, zentrum, dl, dt, dd, ol, ul, li, fieldset, form, label, legende, tabelle, caption, tbody, tfoot, thead, tr, th, td, artikel, beiseite, leinwand, details, einbetten, figur, figcaption, footer, header, hgroup, menu, nav Abschnitt, Zusammenfassung, Zeit, Marke, Audio, Video Marge: 0; Polsterung: 0; Grenze: 0; font: erben; vertikal ausrichten: Grundlinie; / * HTML5-Anzeige-Rollen-Reset für ältere Browser * / Artikel, beiseite, Details, Abbildung, Fußzeile, Kopfzeile, hgroup, Menü, nav, Abschnitt display: block; body Zeilenhöhe: 1; ol, ul list-style: none; blockquote, q Anführungszeichen: keine; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; borderabstand: 0; a text-decoration: none;
Bevor wir nun in den Schieberegler springen, fügen wir der Seite einen Hintergrund hinzu. Wenn Sie die PSD bereits heruntergeladen haben, werden Sie feststellen, dass es eine Ebene mit einem radialen Verlauf gibt, die auf eine subtile Beleuchtung hinweist. Wir erstellen dies durch ein wiederholbares Muster, etwas leichter als die PSD. Nachdem Sie den Hintergrund angewendet haben, verwenden wir einige Einfügungsfeld-Schatten für das HTML-Tag, um das Licht in der Mitte zu replizieren.
html -Webkit-Box-Schatten: Einfügung 250px 250px 250px rgba (0,0,0, 0,25), Einfügung -250px -250px 250px rgba (0,0,0, 0,25); -moz-box-shadow: Einfügung 250px 250px 250px rgba (0,0,0, 0,25), Einfügung -250px -250px 250px rgba (0,0,0, 0,25); Box-Schatten: Einfügung 250px 250px 250px rgba (0,0,0, 0,25), Einfügung -250px -250px 250px rgba (0,0,0, 0,25); Breite: 100%; Höhe: 100%; body background: url (… /images/bg.jpg) repeat; Schriftgröße: 100%;
Jetzt können wir endlich unseren Slider starten! Der Nivo Slider ist das Werk von Gilbert Pellegrom und Michael Wright, zusammen als Dev7studios und professionelle Freunde mit Orman bekannt.
Es ermöglicht uns, unseren Slider mit möglichst wenig Markup zu erstellen. Alles, was wir tun müssen, ist ein Div mit einer ID zu erstellen, was auch immer Sie mögen. Ich verwende in diesem Fall "Slider" und eine Klasse von "nivoSlider". Dann musst du nur noch deine Bilder in das div einfügen, das war's!
Bildschieberegler 
Als Nächstes zentrieren wir unseren Schieberegler in der Mitte der Seite. Wenn Sie meinem letzten Tutorial gefolgt sind, haben Sie den Prozess durchlaufen, wie Sie dies erreichen. Wenn Sie weitere Informationen wünschen, lesen Sie diesen Artikel über CSS-Tricks.
Wir haben auch einige Schatten hinter dem Schieberegler hinzugefügt, während wir uns die Browser-Präfixe merken. Beachten Sie, dass wir auch ein paar weitere CSS hinzugefügt haben, die für die Funktion von nivoSlider erforderlich sind.
#Slider Position: absolut! wichtig; Spitze: 50%; links: 50%; Breite: 650px; Höhe: 350px; Rand oben: -175px; Rand links: -325px; -webkit-box-shadow: 0px 0px 5px rgba (0,0,0, 0,5), 0px 0px 20px rgba (0,0,0, 0,2); -moz-box-shadow: 0px 0px 5px rgba (0,0,0, 0,5), 0px 0px 20px rgba (0,0,0, 0,2); Box-Schatten: 0px 0px 5px rgba (0,0,0, 0,5), 0px 0px 20px rgba (0,0,0, 0,2); .nivoSlider img position: absolut; oben: 0; links: 0; Anzeige: keine; .nivoSlider a border: 0; Bildschirmsperre; .nivo-slice display: block; Position: absolut; z-Index: 5; Höhe: 100%; .nivo-box display: block; Position: absolut; z-Index: 5;
Zeit, den Nivo Slider zu integrieren. Beginnen Sie mit http://nivo.dev7studios.com/pricing/ und laden Sie das jQuery-Plugin herunter. Kopieren Sie nach dem Herunterladen und Entpacken die Datei jquery.nivo.slider.js in Ihren in Schritt 1 erstellten Ordner js.
Als Nächstes müssen wir einen Link zu dieser Datei in unserem HTML-Dokument erstellen.
Bildschieberegler
Jetzt haben wir unser Plugin heruntergeladen und verlinkt, wir müssen es an unseren Schieberegler anschließen und einige optionale Parameter definieren. In der Nivo-Dokumentation finden Sie Details zu allen verfügbaren Optionen.
Accentsconagua
