• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Karuzela z Bootstrapa nie chce działać!

Cloud VPS
0 głosów
717 wizyt
pytanie zadane 24 marca 2017 w JavaScript przez Gaspar Nowicjusz (240 p.)
edycja 24 marca 2017 przez Gaspar
Proszę mi pomóc. Kopiowałem kod z kursu na YT do Netbeansa, Bracketsa i Notepada++, i nie chce zadziałać mi karuzela, tylko ciągle pokazują mi się   obrazek nad obrazkiem. Poniżej podaję ten feralny kod: 

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="C:/Users/Dell/Desktop/js/css/bootstrap.css">
    </head>
    <body>
        <section class="row">
            <div class="col-lg-9">
                <div id="car1" class="carousel slide" data-ride="carousel" data-interval="2000" data-pause="hover" data-wrap="true">
                    <ol class="carousel-indicators">
                        <li data-target="#car1" data-slide-to="0" class="active"></li>
                        <li data-target="#car1" data-slide-to="1"></li>
                        <li data-target="#car1" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="C:\Users\Dell\Desktop\images\slajd1.jpg" alt="slajd1">
                            <div class="carousel-caption">Hortensje</div>
                        </div>
                        <div class="item active">
                            <img src="C:\Users\Dell\Desktop\images\slajd2.jpg" alt="slajd2">
                            <div class="carousel-caption">Miś Koala</div>
                        </div>
                        <div class="item active">
                            <img src="C:\Users\Dell\Desktop\images\slajd3.jpg" alt="slajd2">
                            <div class="carousel-caption">Latarnia morskaja</div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#car1" data-slide="prev">
                        <span class="icon-prev"></span>
                        
                    </a>
                    <a class="right carousel-control" href="#car1" data-slide="next">
                    <span class="icon-next"></span></a>
                </div><hr/><div class="alert alert-info">Karuzela składa się z 3 obrazków</div>
            </div><aside class="col-lg-3">
                <p>Karuzela w 9 kolumnach i 3-kolumnowy ASIDE</p>
                <p>K. zawiera strzałki w lewo i w prawo, wskaźnik slajdu oraz tytuł każdego slajdu</p>
            </aside>
        </section>
        <script src="C:/Users/Dell/Desktop/js/jquery/jquery.js"></script>
        <script src="C:/Users/Dell/Desktop/js/js/bootstrap.js"></script>
        <script> 
            $('.carousel')carousel('cycle');
            </script>
    </body>

</html>

2 odpowiedzi

0 głosów
odpowiedź 24 marca 2017 przez zgrybus Pasjonat (24,860 p.)
wejdź w f12 i zobacz błąd w konsoli.
0 głosów
odpowiedź 24 marca 2017 przez Pietrak Pasjonat (18,850 p.)

Nie znam bootstrapa, ale na 100% powinno być

$('.carousel').carousel('cycle'); 

 

komentarz 24 marca 2017 przez Gaspar Nowicjusz (240 p.)
edycja 24 marca 2017 przez Gaspar

Po Ctrl+A, Ctrl+C i Ctrl+V w Notepadzie++ jakoś w ypadła ta ^ kropka. Z kropką też nie działa. Ten kod podaję niżej. Co mi da to F12?? Przepisywałem z tego tutorialu https://www.youtube.com/watch?v=OfT71jokVik  Nie majstrowałem przy plikach js czy css. Że przyszło mi się mordować przy takich bzdetach(...)

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
        <section class="row">
            <div class="col-lg-9">
                <div id="car1" class="carousel slide" data-ride="carousel" data-interval="2000" data-pause="hover" data-wrap="true">
                    <ol class="carousel-indicators">
                        <li data-target="#car1" data-slide-to="0" class="active"></li>
                        <li data-target="#car1" data-slide-to="1"></li>
                        <li data-target="#car1" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="C:\Users\Dell\Desktop\images\slajd1.jpg" alt="slajd1">
                            <div class="carousel-caption">Hortensje</div>
                        </div>
                        <div class="item active">
                            <img src="C:\Users\Dell\Desktop\images\slajd2.jpg" alt="slajd2">
                            <div class="carousel-caption">Miś Koala</div>
                        </div>
                        <div class="item active">
                            <img src="C:\Users\Dell\Desktop\images\slajd3.jpg" alt="slajd2">
                            <div class="carousel-caption">Latarnia morskaja</div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#car1" data-slide="prev">
                        <span class="icon-prev"></span>
                       
                    </a>
                    <a class="right carousel-control" href="#car1" data-slide="next">//Znowu podpowiedź nie działa(przy next)
                    <span class="icon-next"></span></a>
                </div><hr/><div class="alert alert-info">Karuzela składa się z 3 obrazków</div>
            </div><aside class="col-lg-3">
                <p>Karuzela w 9 kolumnach i 3-kolumnowy ASIDE</p>
                <p>K. zawiera strzałki w lewo i w prawo, wskaźnik slajdu oraz tytuł każdego slajdu</p>
            </aside>
        </section>
        <script src="js/libs/jquery.js"></script>
<script src="js/bootstrap.js"></script>
        <script>
            $('.carousel').carousel('cycle');
            </script>
    </body>

</html>

komentarz 24 marca 2017 przez Gaspar Nowicjusz (240 p.)
Problem, po spokojnej analizie jest ROZWIĄZANY, bo powinien być w kodzie tylko 1 "<div class="item active"> ". Obym nie musiał znowu prosić o pomoc.

Podobne pytania

0 głosów
1 odpowiedź 489 wizyt
0 głosów
1 odpowiedź 388 wizyt
pytanie zadane 10 grudnia 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)
0 głosów
2 odpowiedzi 301 wizyt
pytanie zadane 25 kwietnia 2018 w HTML i CSS przez Dichstein Nowicjusz (120 p.)

93,456 zapytań

142,451 odpowiedzi

322,721 komentarzy

62,837 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...