Wielokrotny pokaz slajdów karuzeli Bootstrap

Jak dodać suwak wielu pokazów slajdów Bootstrap Carousel Slideshow na jednej lub jednej stronie?

W tym samouczku przedstawiamy próbkę działającego kodu źródłowego. Najpierw pobierz przykładowy kod za pomocą przycisku Pobierz kod na dole strony.

Dodawanie i tworzenie wielu suwaków karuzeli ładowania początkowego na stronie jest bardzo łatwe i proste.

Zacznijmy więc od przykładowego kodu.

Po zakończeniu pobierania kodu źródłowego otrzymasz plik zip „multiple-bootstrap-carousels.zip”. Rozpakuj plik zip w dowolnym miejscu do lokalnego systemu komputerowego.

Po wyodrębnieniu znajdziesz katalog o nazwie „multiple-bootstrap-carousels”, w tym katalogu otrzymasz następujące zasoby:

1. Katalog CSS
2. Katalog czcionek
3. Katalog obrazów
4. Katalog JS
5. Katalog CSS
6. Plik HTML – multiple-bootstrap-carousels.html

Czym są te zaświadczenia?

Te zasoby są wymagane do utworzenia wielu suwaków karuzeli ładowania początkowego.

• Katalog CSS zawiera plik „bootstrap.min.css”, który służy do projektowania responsywnych stron HTML.
• Katalog czcionek jest używany przez bootstrap CSS do generowania różnych wbudowanych ikon graficznych. Karuzela suwak nawigacji strzałka kontrolka również wygenerowana przez to. Możesz sprawdzić tutaj.
• Katalog Images zawiera wszystkie obrazy, które wykorzystamy w slajdach karuzeli.
• Katalog JS zawiera 2 pliki js „jquery.min.js” i „bootstrap.min.js”. plik jquery.min.js to biblioteka JavaScript, której celem jquery jest używanie JavaScript na stronach internetowych. plik bootstrap.min.js to plik biblioteki bootstrap frameworka js, który służy do tworzenia karuzeli bootstrapowych, formularzy modeli, podpowiedzi, zakładek itp. plik bootstrap.min.js jest zależny od pliku jquery.min.js, musisz załadować najpierw przed użyciem bootstrap js. Możesz dowiedzieć się więcej o pliku biblioteki bootstrap js tutaj.
• Plik HTML (multiple-bootstrap-carousels.html) zawiera cały projekt i część kodu wielu suwaków karuzeli.

dowiedzmy się więcej o pliku multiple-bootstrap-carousels.html.

Powinieneś otworzyć plik HTML w dowolnym edytorze kodu. Jeśli nie masz zainstalowanego narzędzia do edycji kodu na komputerze, oto kilka płatnych narzędzi do edycji kodu, pobierz i zainstaluj dowolne narzędzie do edycji kodu:

W sekcji Head załadowaliśmy wszystkie wymagane pliki CSS i js oraz cztery kody JS karuzeli, jak poniżej:

Kod

 <głowa>
 <title>Przykład pokazu slajdów z wieloma karuzelami Bootstrap</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=urządzenie-szerokość, początkowa-skala=1">
 
 <!-- biblioteka css bootstrap -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- Najnowsza biblioteka jQuery (najpierw załaduj tę bibliotekę) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- biblioteka bootstrap js -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- karuzela dostosowująca kod CSS -->
 <styl>
 .karuzela {
 /* tutaj możesz dodać dostosowujący css, np. wysokość suwaka, szerokość */
 }
 </style>
 
 <!-- kod js karuzeli -->
 <skrypt>

 /* pierwszy pokaz slajdów w karuzeli */
 $('#karuzela-1').karuzela({
      // Czas opóźnienia między slajdami na rowerze, Jeśli fałsz, brak cyklu
      interwał: 500,

      // Wstrzymuje przesuwanie po wejściu myszy i wznawia po wyjściu myszy.
      pauza: "najedź",

      // Czy karuzela powinna pracować w sposób ciągły, czy musi mieć mocne zatrzymania.
      okład: prawda,

      // Czy karuzela powinna reagować na zdarzenia klawiatury.
      klawiatura: prawda
 });
 
 
 /* pokaz slajdów drugiej karuzeli */
 $('#karuzela-2').karuzela({
      interwał: 1000,
      okład: prawda,
      klawiatura: prawda
 });
 
 
 /* trzeci pokaz slajdów na karuzeli */
 $('#karuzela-3').karuzela({
     interwał: 2000,
     okład: prawda,
     klawiatura: prawda
 });
 
 
 /* czwarty pokaz slajdów na karuzeli */
 $('#karuzela-4').karuzela({
     interwał: 3000,
     okład: prawda,
     klawiatura: prawda
 });
 </script>
 </head>

W sekcji Body definiujemy kod HTML dwóch karuzeli. Teraz wyjaśnię działanie pierwszego kodu suwaka. Podzieliliśmy div klasy wiersza na dwie kolumny za pomocą klasy col-md-6. A do pierwszej kolumny dodaliśmy kod HTML pierwszego suwaka karuzeli, taki sam jak poniżej.

 <div class="row">
 <!--------------- początek pierwszej kolumny -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Karuzela pierwsza</h3></center>
   <!-------------- Rozpoczęcie pierwszego pokazu slajdów na karuzeli -------------->
   <div class="carousel slide" data-ride="carousel">
   <!-- pociski ślizgowe -->
   <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>

   <!-- opakowanie na slajdy -->
   <div class="carousel-inner" role="listbox">
    
    <!-- slajdy 1 -->
    <div class="element aktywny">
     <img src="obrazy/dziewczyna-1.jpg" alt="Chania">
    </div>
 
    <!-- slajdy 2 -->
    <div class="item">
     <img src="obrazy/dziewczyna-2.jpg" alt="Chania">
    </div>
 
    <!-- slajdy 3 -->
    <div class="item">
     <img src="obrazy/dziewczyna-3.jpg" alt="Kwiat">
    </div>

   </div>

   <!-- strzałki sterowania slajdami w lewo i w prawo -->
   <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">Poprzedni</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">Dalej</span>
   </a>
  </div>
  <!--------------- koniec pierwszego pokazu slajdów na karuzeli -------------->
  </div>
 </div>
 <!--------------- koniec pierwszej kolumny -------------->
</row>

W powyższym kodzie HTML znajdują się trzy części suwaka karuzeli

• Kulki suwaka
• Slajdy obrazu
• Nawigacja suwakiem

Sekcja Slider Bullets jest zbudowana przy użyciu znacznika listy zamówień w HTML. <ol> używa klasy o nazwie carousel-indicators , która jest zdefiniowana w pliku CSS ładowania początkowego. A każdy tag <li> ma atrybut data-target=”#carousel-1″ , gdzie #carousel-1 to ten sam identyfikator, którego używamy w kodzie js pierwszej karuzeli w kodzie przykładowym.

Sekcja Slider Image Slides zawiera div z elementem klasy. W każdym z tych elementów div dodaliśmy tag obrazu, aby załadować obraz slajdu.

Slider Navigation służy do poruszania się po slajdach obrazu w lewo lub w prawo. Strzałki nawigacyjne są tworzone przez graficzne ikony ładowania początkowego zwane Glyphicon . Przyciski nawigacyjne są umieszczone w tagu kotwicy <a> z funkcją atrybutu danych karuzeli ładowania początkowego i klasą kontroli karuzeli . W tagu <a> w atrybucie href dodaliśmy ten sam identyfikator ( #carousel-1 ), który dodaliśmy wcześniej w części z suwakami. Ten identyfikator jest używany w kodzie js pierwszego pokazu slajdów karuzeli, aby aktywować funkcję pierwszego suwaka w kodzie HTML pierwszego suwaka.

Do naszego drugiego kodu suwaka przypisaliśmy inny identyfikator #karuzela-2 dla wszystkich trzech części kodu suwaka, takich jak kod js drugiego suwaka, punktory drugiego suwaka i kod HTML nawigacji.

Nadzieja! uważacie, że samouczek i przykładowy kod są opisowe i działają dla was. W przykładzie skomentowaliśmy każdą sekcję kodu, dzięki czemu można łatwo zrozumieć każdy kod.

Chłopaki, jeśli masz sugestie dotyczące języka samouczka i przykładowego kodu do pobrania, napisz do nas na naszą pocztę. Nasz adres e-mail to awordpresslife{at}gmail{dot}com

Dzięki przeczytaniu, korzystaniu i wspieraniu tego samouczka.

Znajdź poniższe linki przydatne przy napisaniu tego samouczka: