• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder Slider mehrmals auf einer Seite nutzen

B

bruderjakob82

Mitglied
Hallo zusammen,

ich bin neu hier und komme direkt mit einer konkreten Frage.
Ich habe vor einen Onepager zu bauen, auf dem mehrere Bildslider untereinander sind.
Wie zum Beispiel hier, wenn auch anders: http://visuelle.co.uk/
Da ich noch ein Anfänger bin, habe ich mich nach einer Vorlage aus dem Web umgesehen und diese gefunden:
http://www.html5marketplace.com/slideshow/
Im Detail passe ich noch einiges an, habe aber folgendes Problem, bei dem ich nicht weiter komme:

Da ich mehrere Slider untereinander machen möchte, können die nicht mehr alle die gleiche ID tragen, da ich auch einen senkrechten Scrollslider zu den einzelen Bildslidern machen möchte. Wie müsste ich das JS anpassen, damit ich es nicht für jeden Slider neu schreiben muss, sondern dass es flexibel funktioniert. Also für den Slider "Home", "Work", "End".

Vielen Dank vorweg
 
Werbung:
nookie schrieb:
Eine Klasse benutzen statt eine ID und die in der JS ansprechen?
Zum Vergrößern anklicken....

So einfach ist das nicht, zumindest auf den ersten Blick.
Das ist kein gutes Slideshow-Script.
Genau genommen ist das gar kein Script, sondern ein HTML/CSS Gerüst mit JavaScript Beispielen.

Man müsste schon einige Änderungen vornehmen, um es mehrfach zu verwenden.
Dann kann man es auch gleich selbst machen.
 
Werbung:
Werbung:
Ganz so einfach ist es nicht. Du musst zusätzlich die Javascript- und die CSS-Datei herunterladen und einbinden. Beide findest Du im Fiddle ganz links unter "External Resources". Außerdem musst Du jQuery einbinden. Und Du musst den Slider inititalisieren, so wie Du es in dem großen Javascript-Feld im Fiddle links unten siehst.
Am besten liest Du dir auch mal die Anleitung auf der HP von Flexslider durch:
http://www.woothemes.com/flexslider/
 
Werbung:
OK, ich kapituliere vor dem Flexslider. Da blicke ich als Einsteiger einfach nicht durch.
Habe mir das eigentlich total einfach vorgestellt. Aber das ist es wohl doch nicht.
Gibt es nicht ein ganz einfaches Tutorial von einem simplen Slider?
 
So viel fehlte doch gar nicht. jQuery und die Javascript- und CSS-Datei einbinden. Die Initialisierung hattest Du ja schon in der Datei script.js. Es gibt viele solche Slider, aber ich glaube nicht, dass es mit einem anderen einfacher ist.
 
@Sempervivum hat recht, viel ist es nicht was gefehlt hat, darum habe ich das mal gemacht:
  1. Lade dir den Flexslider herunter: http://flexslider.woothemes.com/ (eigentlich reicht dir die jquery.flexslider-min.js)

  2. <head> ändern:
    HTML: 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="./jquery.flexslider-min.js"></script>
    <script src="./code.js"></script>
</head>
    Bei den <script>-Tags bzw. bei jQuery-Plugins (was der Flexslider ja nun mal ist) ist die Reihenfolge wichtig; erst jQuery, dann das Plugin und zum Schluss dein eigener Code.

  3. In code.js noch ein Event-Listener für das ready-Event um den Code schreiben:
    Code: 
     $("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
   
    // The slider being synced must be initialized first
    $('.flexslider').flexslider({
        animation: "slide",
    });
});
Du kannst dann auch noch über IDs jedem Slider einzeln verschiedene Einstellungen mitgeben wie es in den Beispielen gezeigt wird:
Code: 
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
});
 
Werbung:
Wow, vielen Dank für deine Mühen @Chronos und auch an dich @Sempervivum!
Habe es jetzt tatsächlich halbwegs zu Laufen bekommen.
Jetzt muss ich nur noch etwas am CSS optimieren und dann sollte es hoffentlich sitzen.
Falls der Schuh doch noch irgendwo drückt, melde ich mich noch mal:-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben