Mehrere Bootstrap-Karussell-Slideshows

Wie füge ich mehrere Bootstrap-Karussell-Slideshow -Schieberegler auf einer einzelnen Seite oder einer Seite hinzu?

In diesem Tutorial stellen wir ein Beispiel für funktionierenden Quellcode bereit. Laden Sie zuerst den Beispielcode über die Schaltfläche Download Code unten auf der Seite herunter.

Das Hinzufügen und Erstellen mehrerer Bootstrap-Karussell-Schieberegler auf der Seite ist so einfach und unkompliziert.

Beginnen wir also mit dem Beispielcode.

Nach Abschluss des Quellcode-Downloads erhalten Sie eine ZIP-Datei „multiple-bootstrap-carousels.zip“. Extrahieren Sie die ZIP-Datei irgendwo in das lokale Computersystem.

Nach der Extraktion finden Sie ein Verzeichnis namens „multiple-bootstrap-carousels“, in diesem Verzeichnis erhalten Sie die folgenden Assets:

1. CSS-Verzeichnis
2. Schriftartenverzeichnis
3. Bildverzeichnis
4. JS-Verzeichnis
5. CSS-Verzeichnis
6. HTML-Datei – multiple-bootstrap-carousels.html

Was sind das für Zeugnisse?

Diese Assets sind erforderlich, um einen Bootstrap mit mehreren Karussell-Schiebereglern zu erstellen.

• Das CSS -Verzeichnis enthält eine Datei „bootstrap.min.css“, die zum Entwerfen von responsiven HTML-Seiten verwendet wird.
• Das Schriftartenverzeichnis wird von Bootstrap CSS verwendet, um die verschiedenen erstellten Grafiksymbole zu generieren. Die Navigationssteuerung für den Karussell-Schieberegler wird ebenfalls dadurch generiert. Sie können hier nachsehen.
• Das Bilderverzeichnis enthält alle Bilder , die wir in den Folien des Karussell-Sliders verwenden werden.
• Das JS -Verzeichnis enthält 2 js-Dateien „jquery.min.js“ und „bootstrap.min.js“. Eine jquery.min.js-Datei ist eine JavaScript-Bibliothek mit dem Zweck, dass jquery JavaScript auf Websites verwendet. Eine Bootstrap.min.js-Datei ist eine Bootstrap-Framework-js-Bibliotheksdatei, die zum Erstellen von Bootstrap-Karussells, Modellformularen, QuickInfos, Registerkarten usw. verwendet wird. Die Bootstrap.min.js-Datei ist von der jquery.min.js-Datei abhängig, Sie müssen laden zuerst, bevor Sie bootstrap js verwenden. Hier können Sie mehr über die Bootstrap-js-Bibliotheksdatei erfahren.
• Die HTML-Datei (multiple-bootstrap-carousels.html) enthält alle Design- und Codeteile mehrerer Karussell-Schieberegler.

Lassen Sie uns mehr über die Datei multiple-bootstrap-carousels.html erfahren.

Sie sollten die HTML-Datei in einem beliebigen Code-Editor öffnen. Wenn Sie kein Code-Editor-Tool auf dem Computer installiert haben, laden Sie hier einige kostenpflichtige Code-Editor-Tools herunter und installieren Sie ein beliebiges Code-Editor-Tool:

Im Head-Bereich haben wir alle erforderlichen CSS- und js-Dateien und vier Karussell-JS-Codes wie folgt geladen:

Code

 <Kopf>
 <title>Beispiel für eine Diashow mit mehreren Bootstrap-Karussells</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- Bootstrap-CSS-Bibliothek -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- Neueste jQuery-Bibliothek (diese Bibliothek zuerst laden) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- bootstrap js-Bibliothek -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- Karussell-Anpassungs-CSS-Code -->
 <Stil>
 .karussell {
 /* Sie können hier benutzerdefinierte CSS hinzufügen, z. B. die Höhe des Schiebereglers, die Breite */
 }
 </style>
 
 <!-- Karussell-JS-Code -->
 <Skript>

 /* erste Karussell-Slideshow */
 $('#Karussell-1').Karussell({
      // Verzögerungszeit zwischen dem Wechseln der Rutsche, wenn falsch, kein Zyklus
      Intervall: 500,

      // Pausiert den Slide bei der Eingabe mit der Maus und setzt ihn beim Verlassen mit der Maus fort.
      Pause: "schweben",

      // Ob das Karussell kontinuierlich fahren oder harte Stopps haben soll.
      wickeln: wahr,

      // Ob das Karussell auf Tastaturereignisse reagieren soll.
      Tastatur: stimmt
 });
 
 
 /* zweite Karussell-Diashow */
 $('#Karussell-2').Karussell({
      Intervall: 1000,
      wickeln: wahr,
      Tastatur: stimmt
 });
 
 
 /* dritte Karussell-Diashow */
 $('#Karussell-3').Karussell({
     Intervall: 2000,
     wickeln: wahr,
     Tastatur: stimmt
 });
 
 
 /* vierte Karussell-Slideshow */
 $('#Karussell-4').Karussell({
     Intervall: 3000,
     wickeln: wahr,
     Tastatur: stimmt
 });
 </script>
 </head>

Im Body-Abschnitt definieren wir den HTML-Code mit zwei Karussells. Erklären Sie nun die Funktionsweise des ersten Slider-Codes. Wir haben eine Zeilenklasse div mit der Klasse col-md-6 in zwei Spalten geteilt. Und in die erste Spalte haben wir den HTML-Code des ersten Karussell-Schiebereglers wie unten eingefügt.

 <div class="row">
 <!-------------- Beginn der ersten Spalte -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Karussell Eins</h3></center>
   <!-------------- Start der ersten Karussell-Diashow -------------->
   <div class="Karussellrutsche" data-ride="Karussell">
   <!-- Folien Aufzählungszeichen -->
   <ol class="Karussell-Indikatoren">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- Wrapper für Folien -->
   <div class="carousel-inner" role="listbox">
    
    <!-- Folien 1 -->
    <div class="Element aktiv">
     <img src="images/girl-1.jpg" alt="Chania">
    </div>
 
    <!-- Folien 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="Chania">
    </div>
 
    <!-- Folien 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="Blume">
    </div>

   </div>

   <!-- Steuerpfeile für linke und rechte Schieberegler -->
   <a class="linke Karussellsteuerung" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Zurück</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Weiter</span>
   </a>
  </div>
  <!-------------- Ende der ersten Karussell-Diashow -------------->
  </div>
 </div>
 <!---------------------- Ende der ersten Spalte -------------->
</row>

Es gibt drei Teile des Karussell-Schiebereglers im obigen HTML-Code

• Slider-Aufzählungszeichen
• Bildfolien
• Slider-Navigation

Der Abschnitt „ Slider Bullets “ wird mithilfe des HTML-Tags „Order List“ erstellt. <ol> verwendet eine Klasse namens carousel-indicators , die in der Bootstrap-CSS-Datei definiert ist. Und jedes <li>-Tag hat ein Attribut data-target=”#carousel-1″, wobei #carousel-1 die gleiche ID ist, die wir im ersten Karussell-js-Code im Beispielcode verwenden.

Slider Image Slides hat ein div mit einem class item . In jedem dieser div-Elemente haben wir ein Bild-Tag hinzugefügt, um das Folienbild zu laden.

Die Slider-Navigation wird verwendet, um Bildfolien nach links oder rechts zu navigieren. Navigationspfeile werden durch Bootstrap-Grafiksymbole namens Glyphicon erstellt . Navigationsschaltflächen werden in ein Anker-<a>-Tag mit Bootstrap-Karussell-Datenattributfunktion und mit Karussell-Steuerungsklasse eingeschlossen. In das <a>-Tag in das href -Attribut haben wir dieselbe ID ( #carousel-1 ) hinzugefügt, die wir zuvor in den Slider-Bullets-Teil hinzugefügt haben. Diese ID wird im JS-Code der ersten Karussell-Slideshow verwendet, um die Funktionalität des ersten Schiebereglers im HTML-Code des ersten Schiebereglers zu aktivieren.

In unserem zweiten Slider-Code haben wir eine andere ID #carousel-2 für alle drei Teile des Slider-Codes zugewiesen, wie in den zweiten Slider-js-Code, die zweiten Slider-Aufzählungszeichen und den HTML-Navigationscode.

Hoffnung! Sie finden, dass das Tutorial und der Beispielcode beschreibend sind und für Sie funktionieren. Wir haben jeden einzelnen Codeabschnitt im Beispiel kommentiert, damit Sie jeden einzelnen Code leicht verstehen können.

Leute, wenn Sie einen Vorschlag bezüglich der Tutorial-Sprache und des herunterladbaren Beispielcodes haben, schreiben Sie uns bitte an unsere E-Mail. Unsere E-Mail-Adresse lautet awordpresslife{at}gmail{dot}com

Vielen Dank für das Lesen, Verwenden und Unterstützen dieses Tutorials.

Unten finden Sie die Links zu nützlichen Referenzen, die wir für Sie gesucht haben, um dieses Tutorial zu schreiben: