3I_WTL_2025/16_carousel

16 - Bootstrap Carousel

🎯 Co se naučíte

V této lekci se naučíte vytvářet carousel (slider/slideshow) pomocí Bootstrapu.

📚 Témata lekce

• Carousel - posuvný slider obrázků
• Carousel indicators - indikátory snímků (tečky)
• Carousel controls - ovládací šipky
• Carousel captions - popisky k obrázkům
• Auto-sliding - automatické přepínání
• JavaScript carousel API - ovládání přes JS
• Data attributes - data-bs-ride, data-bs-slide-to

📂 Soubory v projektu

• index.html - HTML s carousel komponentou
• css/bootstrap.css - Bootstrap CSS
• js/bootstrap.js - Bootstrap JS (DŮLEŽITÝ pro carousel!)
• images/ - obrázky pro carousel

💻 Základní Carousel

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <!-- Indikátory (tečky) -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExample"
                data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#carouselExample"
                data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#carouselExample"
                data-bs-slide-to="2"></button>
    </div>

    <!-- Snímky -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption">
                <h5>První snímek</h5>
                <p>Popis prvního snímku</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- Ovládací šipky -->
    <button class="carousel-control-prev" type="button"
            data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button"
            data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Sledujte automatické přepínání snímků
3. Vyzkoušejte kliknout na šipky (prev/next)
4. Klikněte na indikátory (tečky) pro přímý přechod
5. Prozkoumejte HTML - všimněte si data-bs-* atributů
6. Zkuste přidat další snímek (carousel-item)
7. Změňte caption texty

💡 Tip pro studenty

Důležité třídy:

• carousel slide - hlavní wrapper
• carousel-inner - kontejner pro snímky
• carousel-item - jednotlivý snímek
• carousel-item active - aktivní (viditelný) snímek
• d-block w-100 - obrázek na celou šířku

Data attributes:

<!-- Automatické spuštění -->
data-bs-ride="carousel"

<!-- Přechod na konkrétní snímek -->
data-bs-slide-to="0"  <!-- první snímek (indexováno od 0) -->

<!-- Přechod vpřed/vzad -->
data-bs-slide="prev"  <!-- předchozí -->
data-bs-slide="next"  <!-- další -->

<!-- Interval mezi snímky (v ms) -->
data-bs-interval="5000"  <!-- 5 sekund -->

Carousel varianty:

Bez automatického přepínání:

<div class="carousel slide">  <!-- bez data-bs-ride -->

Fade efekt místo slide:

<div class="carousel slide carousel-fade" data-bs-ride="carousel">

Vlastní interval:

<div class="carousel-item" data-bs-interval="2000">
    <!-- tento snímek se zobrazí 2 sekundy -->
</div>

JavaScript API:

// Získání carousel instance
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

// Ovládání
carousel.next()        // další snímek
carousel.prev()        // předchozí snímek
carousel.to(2)         // přechod na snímek 2
carousel.cycle()       // spustit automatické přepínání
carousel.pause()       // pozastavit

Responzivní carousel:

<!-- Různé výšky pro různá zařízení -->
<style>
.carousel-item img {
    height: 400px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .carousel-item img {
        height: 250px;
    }
}
</style>

⚠️ Důležité poznámky

1. První carousel-item musí mít třídu active
2. Všechny data-bs-target musí odpovídat ID carouselu
3. Bootstrap.js musí být připojen - carousel funguje na JavaScriptu
4. Obrázky by měly mít stejné rozměry pro hezký vzhled

🎯 Praktické využití

• Hlavní stránka - hero slider s produkty
• Galerie - slideshow fotek
• Testimonials - recenze zákazníků
• Portfolio - ukázky projektů

🔗 Související lekce

• Předchozí: 15_bootstrap_components - Bootstrap komponenty
• Další: 17_modal - Bootstrap modal
• Dokumentace: Bootstrap Carousel