Witam, przekopałem cały internet, ale nie znalazłem odpowiedzi.
Problem polega na tym, że po dodaniu karuzeli przestało działać rozwijane menu w bootstrapie (dropdown-menu). menu się wyświetla, ale nie rozwija się.
Zarówno menu jak i karuzela korzystają z jQuery (na stronę wrzuciłem najnowsza wersję - 3.2.1). Przypuszczam, że to jest przyczyną, ale kompletnie nie mam pojęcia jak to ominąć.
Ktoś ma jakieś pomysły? Z góry dzięki za pomoc ;)
0
0
Jakieś błędy z konsoli? (like that: https://developers.google.com/web/tools/chrome-devtools/console/images/console-drawer.png)
0
Kompletnie nic niestety :)
0
Powycinaj części strony do innego pliku i sprawdzaj czy wszystko działa po małej ilości elementów, aż znajdziesz to co psuje.
Unit testy xd
0
Robiłem tak w pierwszej kolejności. Jak menu i karuzela są w oddzielnych plikach to wszystko działa, ale w jednym niestety nie...
Wklejam kod, może coś zrobiłem źle
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tytuł</title>
<!-- Latest compiled and minified CSS -->
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Rozwiń nawigację</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://stomatologiadiament.pl"><img class="responsive" src="img/logo2.png" alt="Logo_Diament" width="187" height="40">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style=
"position: relative"> Dlaczego my? <span class="caret"></span></a>
<ul class="my-dropdown-menu dropdown-menu target" role="menu" style="z-index: 2">
<li><a href="#">Misja gabinetu</a></li>
<li><a href="#">O nas</a></li></ul>
<li><a href="#">Usługi</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Cennik</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- KONIEC NAWIGACJI -->
</div>
<!--POKAZ SLAJDÓW TOP -->
<div class="container-fluid">
<div class="row">
<div class="col-xlg-1">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to = "0" classs="active"></li>
<li data-target="#myCarousel" data-slide-to = "1"></li>
<li data-target="#myCarousel" data-slide-to = "2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slider/slide01.jpeg" alt="slide01" classs="img-responsive">
</div>
<div class="item">
<img src="img/slider/slide02.jpeg" alt="slide02" classs="img-responsive">
</div>
<div class="item">
<img src="img/slider/slide03.jpeg" alt="slide03" classs="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- KONIEC POKAZ SLAJDÓW TOP -->
<!-- POTRÓJNA KOLUMNA -->
<div class="row">
<div class="container-fluid">
<div class="col-1 col-lg-4">
<div class="col-1-1 col-lg-6 ">
<p class="umow">Umów</p>
<h1 class="wizyte">Wizytę</h1>
</div>
<div class="col-1-2 col-lg-6">
<form class="order-form" id="order-form">
<div class="form-group">
<input type="text" class="form-control" id="fullname" placeholder="Imię i nazwisko">
</div>
<div class="form-group">
<select class="form-control" name="department" id="department">
<option>Konsultacja</option>
<option>Leczenie</option>
<option>Kontrola</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone" placeholder="Telefon">
</div>
<button type="submit" class="my-btn btn-danger">Umów wizytę!</button>
</form>
</div>
</div>
<div class="col-2 col-lg-4">
<div class="col-2-1 col-lg-6">
<p class="umow">Waszym</p>
<h1 class="wizyte">Zdaniem</h1>
</div>
<div class="col-2-2 col-lg-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur.</p>
</div>
</div>
<div class="col-3 col-lg-4">
<div class="col-3-1 col-lg-6">
<p class="umow">Godziny</p>
<h1 class="wizyte">Pracy</h1>
</div>
</div>
</div>
</div>
<!-- KONIEC POTRÓJNA KOLUMNA -->
</body>
</html>
0
Spróbuj tak załaduj same menu, a karuzele dynamicznie za pomocą jquery, albo odwrotnie.
0
Rozwiń temat, bo nie do końca rozumiem, o co Ci chodzi - jestem newbie, ale szybko łapię :)
0
Ja tam nie znam nic z webówki poza podstawami javascript, zawołam ci kogoś do pomocy.
@czysteskarpety @mr_jaro
0
pewnie jakiś konflikt class/id/skrypty, wkleiłem twoje navi do przykładu z którego korzystałeś i się rozwija
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
bez całego kodu/strony ciężko wróżyć...
0
Czyli musze pogrzebac w stylach bootstrapa?
0
coś musi być w twojej kompilacji bootstrapa, jak chcesz to wrzuć to na jakieś repo, czy plik i prześlij na priv to zobaczę jak sobie nie dasz rady
0
Ok, powalcze z tym jeszcze troche sam - moze sie czegoś naucze 
a jak nie to sie odezwe - dzieki
0
Spróbuj poprawić swój kod w ten sposób:
dodać do kontenera #myCarousel atrybut data-ride="carousel" oraz popraw wszystkie elementy które mają błędne nazwy np. zamiast classs to class itd.
<div class="container-fluid">
<div class="row">
<div class="col-xlg-1">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to = "0" class="active"></li>
<li data-target="#myCarousel" data-slide-to = "1"></li>
<li data-target="#myCarousel" data-slide-to = "2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://rynko.pl/wp-content/uploads/2014/03/jquery_logo.png" alt="slide01" class="img-responsive">
</div>
<div class="item">
<img src="http://rynko.pl/wp-content/uploads/2014/03/jquery_logo.png" alt="slide02" class="img-responsive">
</div>
<div class="item">
<img src="http://rynko.pl/wp-content/uploads/2014/03/jquery_logo.png" alt="slide03" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
0
Witam. Niestety nie pomogła poprawa, ani wstawienie kodu, który podałeś powyżej. Cały czas jest tak samo - rozwijane menu się nie rozwija.
Update:
Wklejam link do plików - gdyby ktoś był tak dobry i zajrzał w kod - byłoby super :)
https://drive.google.com/drive/folders/0B3HB31_v2WrtVDItaHcxdFlEQU0
0
To powinno zadziałać (do obstylowania + zmiana linków, https://getbootstrap.com/docs/3.3/examples/carousel/#), już nie chciało mi się tego analizować ale prawdopodobnie paczka boostrapa gryzie się z jquery. Przy obecnym kodzie jak klikniesz w menu to zobaczysz w konsoli exceptiony.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tytuł</title>
<!-- Latest compiled and minified CSS -->
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://getbootstrap.com/docs/3.3/examples/carousel/carousel.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Rozwiń nawigację</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="responsive" src="#" alt="Logo" width="187" height="40">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Dlaczego my? <span class="caret"></span></a>
<ul class="my-dropdown-menu dropdown-menu target" role="menu" style="z-index: 2">
<li><a href="#">Misja gabinetu</a></li>
<li><a href="#">O nas</a></li></ul>
<li><a href="#">Usługi</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Cennik</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- KONIEC NAWIGACJI -->
</div>
<!--POKAZ SLAJDÓW TOP -->
<div class="container-fluid">
<div class="row">
<div class="col-xlg-1">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<img src="img/slider/slide01.jpg" alt="slide01" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<img src="img/slider/slide02.jpg" alt="slide02" class="img-responsive">
</div>
</div>
</div>
<div class="item active">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<img src="img/slider/slide013.jpg" alt="slide03" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- KONIEC POKAZ SLAJDÓW TOP -->
<!-- POTRÓJNA KOLUMNA -->
<div class="flex-row row">
<div class="container-fluid">
<div class="col-1 col-lg-4">
<div class="col-1-1 col-lg-6 ">
<p class="umow">Umów</p>
<h1 class="wizyte">Wizytę</h1>
</div>
<div class="col-1-2 col-lg-6">
<form class="order-form" id="order-form">
<div class="form-group">
<input type="text" class="form-control" id="fullname" placeholder="Imię i nazwisko">
</div>
<div class="form-group">
<select class="form-control" name="department" id="department">
<option>Konsultacja</option>
<option>Leczenie</option>
<option>Kontrola</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone" placeholder="Telefon">
</div>
<button type="submit" class="my-btn btn-danger">Umów wizytę!</button>
</form>
</div>
</div>
<div class="col-2 col-lg-4">
<div class="col-2-1 col-lg-6">
<p class="umow">Waszym</p>
<h1 class="wizyte">Zdaniem</h1>
</div>
<div class="col-2-2 col-lg-6">
<h2 class="pochwala text-right" style="color: #ffffff">"<small style="color: #ffffff">Stomatologia Diament jest super! Pani dr. Obara jest profesjonalistką pełną gembą!</small> </h2>
</div>
</div>
<div class="col-3 col-lg-4">
<div class="col-3-1 col-lg-6">
<p class="umow">Godziny</p>
<h1 class="wizyte">Pracy</h1>
</div>
<div class="col-3-2 col-lg-3">
<p>Poniedziałek:</p>
<p>Wtorek:</p>
<p>Środa:</p>
<p>Czwartek:</p>
<p>Piątek:</p>
<p>Sobota:</p>
<p>Niedziela:</p>
</div>
<div class="col-3-3 col-lg-3">
<p>8:00-20:00</p>
<p>8:00-20:00</p>
<p>8:00-20:00</p>
<p>8:00-20:00</p>
<p>8:00-20:00</p>
<p>8:00-20:00</p>
<p>Nieczynne</p>
</div>
</div>
</div>
<!-- KONIEC POTRÓJNA KOLUMNA -->
<div class="container-fluid">
<div class="row">
<div class="hello col-xlg-1">
<h1 class="text-center">Witaj w naszym gabinecie</h1>
<h3 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit ultrices efficitur. Aenean non elementum arcu. Donec iaculis lobortis euismod. Vestibulum ante ipsum </h3>
<button type="submit" class="blog-btn btn-default center-block">Przejdź do bloga</button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="recepcja-opis col-lg-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit ultrices efficitur. Aenean non elementum arcu. Donec iaculis lobortis euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer gravida est sit amet ultrices porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non justo tellus. Suspendisse potenti. Mauris a pulvinar odio. Aliquam auctor dolor et molestie facilisis. Vestibulum vitae enim quis diam mollis tristique eget id felis. Ut vel justo quis ex hendrerit volutpat. Integer ornare, tortor a ornare congue, orci ex mollis magna, non blandit tellus erat quis mi. Ut quis lorem feugiat, blandit nibh at, malesuada ligula. In rhoncus tempor metus id lacinia. In hac habitasse platea dictumst.</p>
</div>
<div class="recepcja-foto col-lg-6"><img src="#" class="img-responsive" alt="rcepcja"></div>
</div>
</div>
</div>
</body>
</html>
0
Teraz nie dziala ani karuzela, ani menu :)
UPDATE: Jednak działa to co dałeś! Bardzo dziękuję za pomoc :) Sam bym tego nie ogarnął :)
Jeszcze raz wielkie dzięki :)
0
Nie ma problemu. Powodzenia z projektem.