# 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

```html
<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:
```html
<!-- 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í:**
```html
<div class="carousel slide">  <!-- bez data-bs-ride -->
```

**Fade efekt místo slide:**
```html
<div class="carousel slide carousel-fade" data-bs-ride="carousel">
```

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

### JavaScript API:

```javascript
// 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:
```html
<!-- 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](https://getbootstrap.com/docs/5.3/components/carousel/)