Prezentare de diapozitive cu carusel bootstrap multiplu

Cum adaug glisorul Multiple Bootstrap Carousel Slideshow pe o singură pagină sau pe o singură pagină?

În acest tutorial, oferim un eșantion de cod sursă funcțional. Mai întâi, descărcați exemplul de cod folosind butonul Descărcare cod din partea de jos a paginii.

Adăugarea și crearea mai multor cursuri de carusel bootstrap pe pagină este atât de ușoară și simplă.

Deci, să începem cu exemplul de cod.

După finalizarea descărcării codului sursă, veți obține un fișier zip „multiple-bootstrap-carousels.zip”. Extrageți fișierul zip oriunde în sistemul computerizat local.

După extragere, găsiți un director numit „multiple-bootstrap-carusels”, în acel director veți obține următoarele active:

1. Director CSS
2. Director de fonturi
3. Director de imagini
4. Director JS
5. Director CSS
6. Fișier HTML – multiple-bootstrap-carousels.html

Care sunt aceste atestări?

Aceste active sunt necesare pentru a crea un bootstrap mai multe glisoare carusel.

• Directorul CSS conține un fișier „bootstrap.min.css” care este folosit pentru a proiecta pagini HTML receptive.
• Directorul de fonturi este folosit de bootstrap CSS pentru a genera diverse pictograme grafice construite. Controlul de navigare cu săgeată glisor carusel, de asemenea, generat de aceasta. Puteți verifica aici.
• Directorul Imagini conține toate imaginile pe care le vom folosi în diapozitivele glisorului carusel.
• Directorul JS conține 2 fișiere js „jquery.min.js” și „bootstrap.min.js”. un fișier jquery.min.js este o bibliotecă JavaScript care are ca scop jquery să folosească JavaScript pe site-uri web. un fișier bootstrap.min.js este un fișier de bibliotecă bootstrap framework js care este utilizat pentru a crea carusele bootstrap, formulare de modele, sfaturi pentru instrumente, file etc. Fișierul bootstrap.min.js depinde de fișierul jquery.min.js, trebuie să încărcați mai întâi înainte de a utiliza bootstrap js. Puteți explora mai multe despre fișierul de bibliotecă bootstrap js aici.
• Fișierul HTML (multiple-bootstrap-carousels.html) conține toate părțile de design și cod ale mai multor glisoare carusel.

să aflăm mai multe despre fișierul multiple-bootstrap-carousels.html.

Ar trebui să deschideți fișierul HTML în orice editor de cod. Dacă nu aveți niciun instrument de editare de cod instalat pe computer, atunci aici câteva instrumente de editare de coduri, descărcați și instalați orice instrument de editare de cod:

În secțiunea Head am încărcat toate fișierele CSS și js necesare și patru coduri JS carusel, după cum urmează:

Cod

 <cap>
 <title>Exemplu de prezentare de diapozitive cu carusel bootstrap multiplu</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- bootstrap css library -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- Cea mai recentă bibliotecă jQuery (încărcați mai întâi această bibliotecă) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- biblioteca bootstrap js -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- carusel personalizare cod CSS -->
 <stil>
 .carusel {
 /* puteți adăuga personalizarea CSS aici, cum ar fi lățimea înălțimii glisorului */
 }
 </stil>
 
 <!-- cod js carusel -->
 <script>

 /* prima prezentare de diapozitive carusel */
 $('#carusel-1').carusel({
      // Timp de întârziere între alunecarea ciclică, dacă este fals, nu există ciclu
      interval: 500,

      // Oprește slide-ul la intrarea mouse-ului și reia la mouseleave.
      pauză: „hover”,

      // Dacă caruselul ar trebui să circule continuu sau să aibă opriri grele.
      wrap: adevărat,

      // Dacă caruselul ar trebui să reacționeze la evenimentele de la tastatură.
      tastatură: adevărat
 });
 
 
 /* a doua prezentare de diapozitive carusel */
 $('#carusel-2').carusel({
      interval: 1000,
      wrap: adevărat,
      tastatură: adevărat
 });
 
 
 /* al treilea carusel prezentare de diapozitive */
 $('#carusel-3').carusel({
     interval: 2000,
     wrap: adevărat,
     tastatură: adevărat
 });
 
 
 /* următoarea prezentare de diapozitive carusel */
 $('#carusel-4').carusel({
     interval: 3000,
     wrap: adevărat,
     tastatură: adevărat
 });
 </script>
 </cap>

În secțiunea Corp, definim codul HTML cu două carusel. Acum, explicând funcționarea primului cod glisor. Am împărțit o clasă de rând div în două coloane folosind clasa col-md-6. Și în prima coloană, am adăugat codul HTML al primului glisor carusel, la fel ca mai jos.

 <div class="row">
 <!-------------- începutul primei coloane --------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Carusel One</h3></center>
   <!-------------- începe prezentarea primului carusel -------------->
   <div class="carousel slide" data-ride="carusel">
   <!-- slides bulletes -->
   <ol class="carousel-indicators">
    <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>

   <!-- ambalaj pentru diapozitive -->
   <div class="carousel-inner" role="listbox">
    
    <!-- slides 1 -->
    <div class="element activ">
     <img src="images/girl-1.jpg" alt="Chania">
    </div>
 
    <!-- diapozitivele 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="Chania">
    </div>
 
    <!-- diapozitivele 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="Floare">
    </div>

   </div>

   <!-- săgețile de control al diapozitivelor din stânga și din dreapta -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Anterior</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">Următorul</span>
   </a>
  </div>
  <!-------------- sfârșitul primului carusel de prezentare de diapozitive --------------->
  </div>
 </div>
 <!-------------- sfârșitul primei coloane --------------->
</row>

Există trei părți ale caruselului glisează în codul HTML de mai sus

• Gloanțele glisante
• Diapozitive de imagine
• Navigare cu glisor

Secțiunea Slider Bullets este construită folosind eticheta HTML pentru lista de comenzi. <ol> folosește o clasă numită carusel-indicators , care este definită în fișierul CSS bootstrap. Și fiecare etichetă <li> are un atribut data-target="#carusel-1″ unde #carusel-1 este același ID pe care îl folosim în primul cod js carusel în codul exemplu.

Slider Image Secțiunea Slides are un div cu un element de clasă. În fiecare din acest div, am adăugat o etichetă de imagine pentru a încărca imaginea diapozitivului.

Navigarea cu glisor este folosită pentru a naviga în direcția stânga sau dreapta prin diapozitivele de imagine. Săgețile de navigare sunt create de pictogramele grafice bootstrap numite Glyphicon . Butoanele de navigare sunt împachetate în eticheta ancora <a> cu funcția de atribut de date carusel bootstrap și cu clasa de control carusel . În eticheta <a> din atributul href , am adăugat același ID ( #carusel-1 ) pe care l-am adăugat anterior în partea cu marcatori glisor. Acest ID este folosit în codul js al primului carusel de prezentare de diapozitive pentru a activa prima funcționalitate slider în primul cod HTML slider.

În cel de-al doilea cod slider, am atribuit un alt ID #carusel-2 pentru toate cele trei părți ale codului slider, cum ar fi codul js al doilea slider, marcatoarele secunde slider și codul HTML de navigare.

Speranţă! credeți că tutorialul și exemplul de cod sunt descriptivi și funcționează pentru dvs. Am comentat fiecare secțiune de cod în exemplu, astfel încât să puteți înțelege cu ușurință fiecare cod.

Băieți, dacă aveți o sugestie cu privire la limba tutorialului și codul exemplu descărcabil, vă rugăm să ne scrieți la e-mail. Adresa noastră de e-mail este awordpresslife{at}gmail{dot}com

Mulțumim pentru citirea, utilizarea și sprijinirea acestui tutorial.

Găsiți linkurile de referințe utile de mai jos pe care am căutat să scriem acest tutorial pentru dvs.: