Why my Bootstrap 4 Carousel doesn't show up? - javascript

I believe I copy and paste the code for carousel from Boostrap 4 (v4.5) correctly, I have also included the Bootstrap cdn in and also JavaScript, JQuery, Popper.js plugins at the end of . Although the Bootstrap 4 navbar works well, I don't understand why the carousel doesn't show up. Are there anything else that I need to include for the carousel to work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="indexStyle.css">
<title>BLANK</title>
</head>
<body>
<!-- Design the navbar -->
<nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
<i class="fas fa-pencil-ruler mr-2"></i>BLANK
<!-- hamburger menu when shrinked -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
<span class="navbar-toggler-icon"></span>
</button>
<div class="colapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
ABOUT US
OUR TEAM
OUR MISSION
CONTACT US
</div>
</li>
<li class="nav-item">
PARENTS/GUARDIANS
</li>
<li class="nav-item">
STUDENTS
</li>
</ul>
</div>
</nav>
<section>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Mid Section -->
<div class="container text-center">
<h3 class="display-5" id="big-title">A New Way of Learning</h3>
<p>Join us for free exclusive free classes</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Your code is working. It is working below. Bootstrap 4 Carrousel will not show up if your image src is not valid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="indexStyle.css">
<title>BLANK</title>
</head>
<body>
<!-- Design the navbar -->
<nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
<i class="fas fa-pencil-ruler mr-2"></i>BLANK
<!-- hamburger menu when shrinked -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
<span class="navbar-toggler-icon"></span>
</button>
<div class="colapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
ABOUT US
OUR TEAM
OUR MISSION
CONTACT US
</div>
</li>
<li class="nav-item">
PARENTS/GUARDIANS
</li>
<li class="nav-item">
STUDENTS
</li>
</ul>
</div>
</nav>
<section>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.ahtcloud.com/images/ahttms.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Mid Section -->
<div class="container text-center">
<h3 class="display-5" id="big-title">A New Way of Learning</h3>
<p>Join us for free exclusive free classes</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

have you tried putting the scripts at the head of the page instead?
I have tried this same code with my images and they worked
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- custom css -->
<link rel="stylesheet" href="indexStyle.css">
<title>BLANK</title>
</head>
<body>
<!-- Design the navbar -->
<nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
<i class="fas fa-pencil-ruler mr-2"></i>BLANK
<!-- hamburger menu when shrinked -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
<span class="navbar-toggler-icon"></span>
</button>
<div class="colapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
ABOUT US
OUR TEAM
OUR MISSION
CONTACT US
</div>
</li>
<li class="nav-item">
PARENTS/GUARDIANS
</li>
<li class="nav-item">
STUDENTS
</li>
</ul>
</div>
</nav>
<section>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Mid Section -->
<div class="container text-center">
<h3 class="display-5" id="big-title">A New Way of Learning</h3>
<p>Join us for free exclusive free classes</p>
</div>
</body>
</html>

Related

Bootstrap4 Carousel not swiping left and right

I am following the Bootstrap code snippet page to create the following carousel. It has three images and the controls are supposed to slide left are right. The scripts that I am using are shown in the <script> tags at the bottom of the file.
<!doctype html>
<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Wantrepreneur</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1 class="display-4">Full Page Image Slider</h1>
<p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images in this snippet are from Unsplash, taken by Joanna Kosinska!</p>
</div>
</section>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
<script src="js/vendor/jquery.slim.min.js"></script>
</html>
However, when I press either of the controls, the link in my browser changes from link.com to link.com#carouselExampleIndicators, but nothing happens and the images don't slide/change. What should I do to fix this?
Thanks,
Vinny
This is a simple script order issue. Bootstrap needs jQuery, but you are loading Bootstrap before jQuery. Switch the order:
<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
Before release of bootstrap 5,
In Bootstrap < 5 is dependent on jQuery:-
so, you have to maintain the order of the external scripts in your html code:-
It should be:-
<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>

Trying to lock resoltution of DIV in bootstrap to specific resolution

I am trying to make a remote display server that can generate slide shows from pictures you give it. Since it will drive a variety of displays it needs to lock the resolution of certain elements that will display full screen on the display side. I can lock the width, but the height refuses to lock in with everything I try. Here is some code that pulls images of various aspect ratios that illustrate the problems.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Website: display page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--My styles sheet -->
<link rel="stylesheet" type="text/css" href="/static/styles.css">
<!-- My Java Scripts -->
<script src="/static/js/moment.min.js"></script>
<!-- Script from server for moment text generator -->
<script src="/static/scripts.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/index">A website</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Query All Users</li>
<li>Add User</li>
<li>Edit Users</li>
<li>Groups Admin</li>
<li>Kiosk Admin</li>
<li>Display Admin</li>
</ul>
<li class="nav-item"><a class="nav-link" href="/messages">Messages</a></li>
<li class="nav-item"><a class="nav-link" href="/user/snyder">Your Profile</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
</nav>
<div class="full-screen-scroller" style="width: 500px; height: 400px; background-color: powderblue;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img style="width: 100%; max-height: 100%;" src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Boeing_B-29_Superfortress_Bockscar_USAF.jpg" alt="Bockscar!">
<div class="carousel-caption"><h3>Bockscar!</h3></div>
</div>
<div class="item">
<img style="width: 100%; height: 100%;" src="https://s1.cdn.autoevolution.com/images/gallery/TESLA-MOTORS-Model-S-4693_78.jpg" alt="Tesla!">
<div class="carousel-caption"><h3>Tesla!</h3></div>
</div>
<div class="item">
<img style="width: 100%; max-height: 100%" src="https://previews.123rf.com/images/sleepyhollow/sleepyhollow1709/sleepyhollow170900002/85803845-african-giraffe-portrait-with-blue-sky-and-green-yellow-vegetation-background-.jpg" alt="Giraffe!">
<div class="carousel-caption"><h3>Giraffe!</h3></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Issues getting a center navbar on bootstrap carousel

I am currently trying to build a website using bootstrap, it is a very basic website, I am trying to setup the homepage where it has a carousel of images and am having issues setting up the navbar. I can't seem to get a floating centered navbar that includes the logo. I want to use the logo as a href to the homepage and then have a button labeled photos that will have a dropdown menu for the photos and a contact page that will have an anchor section on the homepage. I have worked with bootstrap previously but not to an extent that I feel 100% comfortable. I have managed to make use of various stack overflow forums for my other issues but have been having issues figuring out how to do this.
Below is the gist of my navbar code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.8.5">
<title>blah</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.headerrow {
text-align: center;
padding-top: 5%;
padding-bottom: 5%;
}
img.caro {
width: 140;
height: 140;
}
</style>
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<img src="logo2.png" style="width:8%; height:8%;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="border-radius: 15px; width:100%; height: 600px !important;">
<div class="item active">
<img src="cover.jpg" alt="Cover1" style="width:100%;">
</div>
<div class="item">
<img src="cover2.jpg" alt="Cover2" style="width:100%;">
</div>
<div class="item">
<img src="LogChimneyOut.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Fireplace3.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Deck1.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Wall2.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Fireplace2.jpg" alt="Cover3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
This includes the navbar as well as the carousel image slideshow right below it. I am trying to get a floating center navbar right on top of the carousel that has the logo, pictures button, and contact page. I have looked elsewhere for navbars but the always seem to break the carousel section. I am most certainly not the greatest with HTML or bootstrap but I am trying here. Thanks.
Inside the navbar-nav menu, create a new list item and move the a tag that hold your logo image inside it, and finally replace mr-auto class with mx-auto,align-items-center classes to make all items centered.
<ul class="navbar-nav mx-auto align-items-center">
<li class="nav-item"><img src=".." alt="..">logo</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
Please see here how the flexbox alignment works in BS4
For the dropdown menu button, follow this structure:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown_id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
<div class="dropdown-menu" aria-labelledby="dropdown_id">
<a class="dropdown-item" href="#">Photos</a>
</div>
</li>
Please note that in your snippet you have linked unnecessarily
different versions of Bootstrap files. Follow this introduction
to see how to include Bootstrap properly in your website.
Example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto align-items-md-center">
<li class="nav-item">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50&text=logo" alt="logo" width="50px" height="50px"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Photo</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="//source.unsplash.com/random/1100x400" alt="Los Angeles" width="1100" height="400" class="w-100 h-100">
</div>
<div class="carousel-item">
<img src="//source.unsplash.com/random/1100x400" alt="Chicago" width="1100" height="400" class="w-100 h-100">
</div>
<div class="carousel-item">
<img src="//source.unsplash.com/random/1100x400" alt="New York" width="1100" height="400" class="w-100 h-100">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</main>

my bootstrap 4 carousel wont display images

The navigation is working but the carousel makes me feel like smashing my laptop.
The carousel wont display images only shows some three dots sliding using bootstrap 4.1.2
<!doctype html>
<html lang="en">
<head>``
<meta charset="utf-8">
<meta name="viewport" content="width=device-width",initial-scale="1">
<title>master c&f</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"> </script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!---Navigation--->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" >
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nabar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">clearing</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">forwading</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">warehousing</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">enquires</a>
</li>
</ul>
</div>
</div>
</nav>
<!----Image slider---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/back.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/FRONT.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/BOAT.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
What could be wrong with this code or why wont it work?
The only thing that i can see here that will cause image loading problems is the directory's. I mean the location of the images. if the path 'img' is located inside other path like public/img/name.jpg you must type the full route. Other reason is if you use php frme work you must use something like base_url() or site_url() before the path. Most of the time the options that specify the paths are in a config file, which hase the full route to the project containing folder.
I guess the main problem here is due to your images path.
Using some image found in google, and simply changing the src of the carousel's images in your snippet, it's working good.
The 3 dots you see in your code, are due to the alt="..." attribute. If you write something here (as you should), you will see that text if the image is not found.
<!doctype html>
<html lang="en">
<head>``
<meta charset="utf-8">
<meta name="viewport" content="width=device-width",initial-scale="1">
<title>master c&f</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"> </script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!---Navigation--->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" >
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nabar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">clearing</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">forwading</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">warehousing</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">enquires</a>
</li>
</ul>
</div>
</div>
</nav>
<!----Image slider---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://staticr1.blastingcdn.com/media/photogallery/2018/6/24/660x290/b_1200x675/ciao-compie-200-anni-il-celebre-saluto-inizio-a-diventare-comune-dal-1818-vitaesteticait_2039115.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="2018/02/13/172803766-5059c7e1-5f17-49f3-b9ee-128dee78981a.jpg" class="d-block w-100" alt="Image not found...">
</div>
<div class="carousel-item">
<img src="https://st3.depositphotos.com/5269571/12517/v/950/depositphotos_125175688-stock-illustration-ciao-italian-greeting.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
Your carousel is fine. Just make sure the paths to the images are correct. What is your directory structure?
Below I have used public images:
.carousel {
max-width: 1200px;
margin: 0 auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!----Image slider---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="https://picsum.photos/1200/600/?random">
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://picsum.photos/1200/600/?gravity=north">
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://picsum.photos/1200/600/?gravity=west">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Bootstrap carousel error with images when i click

I have problem with my carousel slider.
The problem is: when i click on next o prev button nothing is happend. I read some articles here on stack but no one helped me. I tried some other carousels, but same result
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<!--<div class="header">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Úvod</li>
<li>Ubytování</li>
<li>Mapa</li>
<li>Ceník</li>
<li>Fotogalerie</li>
<li>Kontakt</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" />
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--<div class="content">
<div class="title_content">Ubytování Macalíkovi</div>
<div class="room1"><p>Všechny pokoje mají společnou kuchyň a sociální zařízení. Kuchyň je vybavena sporákem, troubou, varnou konvicí, mikrovlnou troubou, chladničkou a nádobím.</p></div>
<div class="room2"><p>Samozdřejmě můžete také využívat prosklennou verandu, která je přístupná z chodby pro všechny ubytované.</p></div>
<div class="room3"><p>V každém pokoji najdete televizi, která je připojenak satelitu, kde najdete velké množství kanálů, pro vaše větší pohodlí.</p></div>
</div>
<div class="footer">
<div class="author"># 2014 Macalíkovi, Všechna práva vyhrazena</div>
</div>
<!--<script>$("#carousel_nav").click(function(){
var item = 4;
$('#home_carousel').carousel(item);
return false;
});</script>--> <!-- -->
<script>
$(document).ready(function(){
console.log("hello world");
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$holder = $( "ol li.active" );
$holder.removeClass('active');
var idx = $('div.active').index('div.item');
$('ol.carousel-indicators li[data-slide-to="'+ idx+'"]').addClass('active');
});
$('ol.carousel-indicators li').on("click",function(){
$('ol.carousel-indicators li.active').removeClass("active");
$(this).addClass("active");
});
});
</script>
this is probably something to do with missing JQuery library,I added your HTML+JQuery and it worked.
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
here's a working example: http://jsfiddle.net/choroshin/2svAm/

Categories