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é

Odpovedať

Rostislav Danko

Člen

Rostislav Danko:18.11.2022 13:20

solved : špatně nalinkovaná knihovna

Odpovedať

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é

Odpovedať

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ť

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ť

Michael Sláma

Člen

Michael Sláma:8.1.2024 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ť

Karel Zaoral

Člen

Karel Zaoral:2.2.2024 14:07

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

Odpovedať

Edita Karlovská

Člen

Edita Karlovská:7.2.2024 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ť

Tomáš Schlesinger

Člen

Tomáš Schlesinger:3. februára 19:04

Ahoj, aby fungoval carousel, musí být v hlavičce cesta k bootstrap css i js

<link rel="stylesheet" href="assets/dist/css/bootstrap.min.css">
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>

v custom reakci na událost je chyba se špatným id elementu karuselu

const carouselElement = document.getElementById('ukazka-carouselu'); // ne #ukazka-carousel
carouselElement.addEventListener('slide.bs.carousel', event => {
    // nějaká reakce...
})

Odpovedať

Dalibor Chovanec

Člen

Dalibor Chovanec:8. mája 14:40

Nevím jak ostatním, ale když jsem se pokusil o nastavení atributu data-bs-interval="false", tak to nastavilo interval na 0ms, takže se mi obrázky přepínaly jako splašené. Pro přerušení automatického přepínání jsem musel odstranit data-bs-ride="carousel".

Odpovedať

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.

Zobrazené 10 správy z 10.

Najčastejšie vyhľadávané

Diskusia – 14. diel - Bootstrap - Carousely a Progress