Tworzenie stron WWW za pomocą Bootstrapa
| Data publikacji: 24-09-2020 | Autor: | Grzegorz Kubera |
Przyciski i grupy przycisków, a także atrakcyjna galeria zdjęć w formie pokazu slajdów – oto kolejne elementy, które są bardzo przydatne przy tworzeniu internetowych witryn. Warto wiedzieć, jak w pełni korzystać z tych zasobów.
W tej części kursu zaczniemy od obiektu multimedialnego Carousel, czyli od pokazu slajdów.
Poniższy przykład zawiera podstawowy pokaz slajdów z kontrolkami i wskaźnikami (można przewijać obrazy w lewo i w prawo, a wskaźniki umieszczone na dole oznaczają ich liczbę). Kod HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Bootstrap – pokaz slajdów</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Wskaźniki -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class=
"active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- Pokaz slajdów -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2020/07/24/09/55/silk-5433442_960_720.jpg" alt="Zdjęcie nr 1" width="960" height="720">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2017/07/11/18/07/market-2494520_960_720.jpg" alt="Zdjęcie nr 2" width="960" height="720">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/08/04/13/28/man-5462849_960_720.jpg" alt="Zdjęcie nr 3" width="960" height="720">
</div>
</div>
<!-- Kontrolki w lewo/w prawo -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
> Klasy w pokazie slajdów
Zdjęcia w pokazie slajdów będą automatycznie ulegać zmianie, choć możemy przełączać się między nimi za pomocą kontrolek. W pokazie slajdów korzystamy z wielu nieznanych dotąd klas, dlatego poniżej znajdują się wyjaśnienia, do czego służą poszczególne elementy:
- .carousel – tworzy pokaz slajdów,
- .carousel-indicators – oznacza wskaźniki (niewielkie kreski na dole) dla każdego slajdu, wskazują one, ile łącznie jest slajdów w danej galerii oraz który slajd aktualnie oglądamy,
- .carousel-inner – dodaje slajdy do pokazu,
- .carousel-item – określa zawartość każdego slajdu,
- .carousel-control-prev – dodaje lewy (poprzedni) przycisk do pokazu slajdów, który umożliwia przełączanie się między slajdami,
- .carousel-control-next – dodaje prawy (następny) przycisk do pokazu slajdów,
- .carousel-control-prev-icon – używany razem z .carousel-control-prev w celu utworzenia przycisku „poprzedni”,
- .carousel-control-next-icon – używany razem z .carousel-control-next, aby stworzyć przycisk „następny”,
- .slide – dodaje efekt przejścia CSS i animacji podczas przełączania się między slajdami (jeśli nie chcemy tego efektu, wystarczy usunąć klasę .slide).
Dodatkowo do pokazu slajdów możemy dodać podpisy dla poszczególnych zdjęć. W tym celu korzystamy z klas <div class="carousel-caption"> oraz <div class="carousel-item">. Poniżej widnieje gotowy przykład HTML:
<body><div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2020/07/24/09/55/silk-5433442_960_720.jpg" alt="Zdjęcie nr 1" width="960" height="720">
<div class="carousel-caption">
<h3>Jedwab</h3>
<p>Proces wytwarzania jedwabiu.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2017/07/11/18/07/market-2494520_960_720.jpg" alt="Zdjęcie nr 2" width="960" height="720">
<div class="carousel-caption">
<h3>Wietnam</h3>
<p>Atrakcyjne światła i lampiony w Wietnamie.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/08/04/13/28/man-5462849_960_720.jpg" alt="Zdjęcie nr 3" width="960" height="720">
<div class="carousel-caption">
<h3>Sporty wodne</h3>
<p>Entuzjasta kitesurfingu.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
[...]
Założyciel firmy doradczo-technologicznej; pełnił funkcję redaktora naczelnego w magazynach i serwisach informacyjnych z branży ICT. Dziennikarz z ponad 13-letnim doświadczeniem i autor książek nt. start-upów i przedsiębiorczości.
Artykuł pochodzi z miesięcznika: IT Professional
Pełna treść artykułu jest dostępna w papierowym wydaniu pisma.