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

Rostislav Danko

Člen

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

Rostislav Danko

Člen

Rostislav Danko:18.11.2022 13:20

solved : špatně nalinkovaná knihovna

Odpovědět

18.11.2022 13:20

Pavel Vaněk

Člen

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

Patrik Lorenc

Člen

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

Denis Gracias

Člen

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

Lenka Slámová

Člen

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

Karel Zaoral

Člen IT Redactor Gang

Karel Zaoral:2. února 14:07

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

Odpovědět

2. února 14:07

Edita Karlovská

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.