IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 14 - Bootstrap - Carousely a Progress

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Rostislav Danko:18.11.2022 13:06

Ahoj,
Žádám o radu ohledně Carouselu, nejsem schopen replikovat funkční carousel ani pokud "hrubě" zkopíruju zdroják z ITnetwork nebo oficiální dokumentace Bootstrapu. Totožný kód, který "zde" funguje, v mém IDE nejde.
Mohu prosím požádat o radu ? Co dělám špatně a jak to spravím?

Defaultní foto se zobrazí v pořádku, nicméně nefungují šipečky na posun na další obrázek

zdroják: https://www.itnetwork.cz/…lighter/1543

Díky, Rosťa

Editováno 18.11.2022 13:07
 
Odpovědět
18.11.2022 13:06
Avatar
Odpovídá na Rostislav Danko
Rostislav Danko:18.11.2022 13:20

solved : špatně nalinkovaná knihovna

 
Odpovědět
18.11.2022 13:20
Avatar
Pavel Vaněk
Člen
Avatar
Pavel Vaněk:29.4.2023 11:05

Je dobře, že někdo napíše, že něco vyřešil. Horší je, když nenapíše jak ... . Mám ten samý problém - carousel nefunguje (nereagují na tlačítka, nemění se obrázky). Co jsem našel, tak by měl stačit bootstrap.min.js , který mám ve verzi 4 v podsložce. Kód je okopírovaný z tutoriálu. Proč se to prosím nehýbe?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/bootstrap.min.js"></script>

    <style>

    </style>
</head>
<body>

    <div id="ukazka-carouselu" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#ukazka-carouselu" data-slide-to="0" class="active"></li>
            <li data-target="#ukazka-carouselu" data-slide-to="1"></li>
            <li data-target="#ukazka-carouselu" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" alt="Les">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Les</h3>
                    <p>Víte, že do lesa si můžete zajít odpočinou od informačních technologií? :) Dobrý je např. ten Klánovický hned u Prahy.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_poust.jpeg" alt="Poušť">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Poušť</h3>
                    <p>Vítr vane pouští, po písku žene klobouk. Zahnal ho do houští, starý a černý klobouk.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_jezero.jpeg" alt="Jezero">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Jezero</h3>
                    <p>Jezera se často vyskytovala v poezii, pravděpodobně pro pocity plynoucí z klidné hladiny rozlehlé vodní plochy.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#ukazka-carouselu" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Předchozí</span>
        </a>
        <a class="carousel-control-next" href="#ukazka-carouselu" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Další</span>
        </a>
    </div>

</body>
</html>
Editováno 29.4.2023 11:06
 
Odpovědět
29.4.2023 11:05
Avatar
Odpovídá na Pavel Vaněk
Patrik Lorenc:4.5.2023 16:04

Ahoj, vyzkoušel jsem a vypadá to, že potřebuješ přidat jquery...

Mrkni na poslední řešení úlohy k lekcím 11 a 12, zkopíruj si linky:

  • bootstrap.min.css 4.1.3 do <head>
  • bootstrap.min.js 4.1.3 + jquery-3.3.1.slim.min.js před konec </body>

S aktuální verzí Bootstrap 5.3 jsem to nerozjel....
Takhle jsem to již použil u více příkladů, které s novou verzí nefungují.

 
Odpovědět
4.5.2023 16:04
Avatar
Denis Gracias:10.7.2023 13:46

Upravená funkční verze carouselu.

<div id="ukazka-carouselu" class="carousel slide">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#ukazka-carouselu" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#ukazka-carouselu" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#ukazka-carouselu" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="img/img1.png" alt="vesmir">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Vesmír</h3>
                    <p>Nějaký text o vesmíru</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="img/img2.jpg" alt="vesmir">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Text 2</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus eveniet quibusdam quia. Amet doloribus.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="img/img3.jpg" alt="vesmir">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Text 3</h3>
                    <p>Cum minus incidunt quas ipsa consequuntur ipsum, quae, soluta iure sint! Eius quidem officiis commodi provident</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#ukazka-carouselu" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Předchozí</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#ukazka-carouselu" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Další</span>
        </button>
    </div>
 
Odpovědět
10.7.2023 13:46
Avatar
Lenka Slámová:8. ledna 14:39

pro mě hodně nepřestavitelné všechny části s JavaScriptem, když máme za sebou v Javě jen základy. ráda bych viděla celý kód. nevím jak si představit kam a jak se dávají ta data atributy apod. škoda že zde není kód ke stažení :)

 
Odpovědět
8. ledna 14:39
Avatar
Karel Zaoral
Tvůrce
Avatar
Karel Zaoral:2. února 14:07

Děkujeme za vaše podněty. Lekci jsme aktualizovali :-)

 
Odpovědět
2. února 14:07
Avatar
Edita Karlovská:7. února 9:11

Kdo by tápal, jak nalinkovat JavaScript jako já:
https://www.youtube.com/watch?…
Bez toho mi Carusel nefungoval. Možná by nebylo od věci to v lekci zmínit.

 
Odpovědět
7. února 9:11
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.