Diskusia – 14. diel - Bootstrap - Carousely a Progress

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

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

Editované 18.11.2022 13:07

Odpovedať

18.11.2022 13:06

Rostislav Danko

Člen

Rostislav Danko:18.11.2022 13:20

solved : špatně nalinkovaná knihovna

Odpovedať

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>

Editované 29.4.2023 11:06

Odpovedať

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í.

Odpovedať

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>

Odpovedať

10.7.2023 13:46

Lenka Slámová

Člen

Lenka Slámová:8. januára 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í

Odpovedať

8. januára 14:39

Karel Zaoral

Člen IT Redactor Gang

Karel Zaoral:2. februára 14:07

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

Odpovedať

2. februára 14:07

Edita Karlovská

Člen

Edita Karlovská:7. februára 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.

Odpovedať

7. februára 9:11

Naučíme ťa pracovať na home-office.

Zistiť viac...

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!

Najčastejšie vyhľadávané

Diskusia – 14. diel - Bootstrap - Carousely a Progress