Bootstrap4 Carousel not swiping left and right - javascript

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>

Related

Bootstrap Carousel Fit Slide to Screen - Not Responsive

So I am trying to make my carousel responsive to resizing, and mobile devices. However, when I resize the screen, the actual images do not stay within the card that I have the carousel in.
The website is actually live, so if you wanted to take a look, please visit wwww.alysaandjordanplustwo.baby
Excuse my skills - I am learning front-end for the first time.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Alysa and Jordan Plus Two | Home </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="background-image: url(img/background.png); background-size:cover;">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark" style="background-color: #6C3400;" >
<a class="navbar-brand" style="color: white;" href="#">Jordan and Alysa Plus Two</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #6C3400;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active" >
<a class="nav-link" style="color: #FFCD73;" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="photo_gallery.html">Photo Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="registry.html">Registry</a>
</li>
<div class="dropdown nav-link" style="padding: none; margin: none;">
<a class="dropdown-toggle" href="about.html" style="background-color: #6c3400; color: white;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item no-border" href="baby_b_memorial.html">Baby B Memorial</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container justify-content-center">
<div class="row justify-content-center">
<div class="card justify-content-center" style="margin-top: 1rem;">
<div class="card-body">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 800px; height: 400px" >
<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 justify-content-center">
<div class="carousel-item justify-content-center active " style="width:800px; height:400px;">
<img class="card-img" src="img/first_halloween_resized.jpg" alt="First slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;" >
<img class="card-img" src="img/2nd_image_resized.jpeg" alt="Second slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;">
<img class="card-img" src="img/third_slide.svg" alt="Third slide">
</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>
</div>
</div>
</div>
</div>
<div class="container text-center" style="background-color: #FFCD73; border-radius: 10px; height: 100%; width: 100%; margin-top: 5vh;">
<h3 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">"Don't find love. Let love find you. <br> That is why it is called falling in love because you do not force yourself to fall,<br> you just fall" <br> - Author Unknown</h3>
<h2 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">~~~</h2>
<h3 style="font-style:bold; color: #6c3400; padding-top: 15px; padding-bottom: 15px;">Find out our babies gender!</h3>
</div>
<div class="container" style="padding-top: 5vh;">
<div class="row">
<div class="col-lg">
<!-- Photo on the left -->
<img class="rounded mx-auto d-block img-thumbnail" src="img/first_photo.jpg" style="margin-bottom: 5vh;">
</div>
<div class="col-sm" style="background-color: #FFCD73; border-radius: 10px; padding-top: 15px; padding-bottom: 10vh;">
<H2>Our Story</H2>
<p>Alysa and I met for the first time at Kennesaw State University in the Fall 2022 semester. I was the first one to message Alysa, as we were in a student group where we could all talk about our majors and meet new people. I decided to message Alysa to see if she wanted to meet and perhaps study together. Which is just what we did – we ended up studying together, and I offered as much help as I could remember while she was taking Calculus. It had been years since I took Calculus 1, and I was very rusty. Before we knew it, we were always around each other, almost every possible minute that we could. Eventually, I believe, we ended up falling for each other, even though we both were hesitant to enter a relationship. I am so, so, so glad that we met, and for the next steps of our life together! <br><br> - Jordan | September 7th, 2022 </p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small white pt-4" style="background-color: #6C3400; margin-top: 10vh;">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 style="color: #FFFFFF;">Thank you for visiting our website!</h5>
<p style="color: #FFFFFF;">Please be respectful, and only share this website with immediate family for the time being. Thank you! <br><br>- Jordan & Alysa</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Registry Links</h5>
<ul class="list-unstyled">
<li>
Amazon
</li>
<li>
Buy Buy Baby
</li>
<li>
Target
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Quick Links</h5>
<ul class="list-unstyled">
<li>
RSVP Form (Coming Soon)
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3" style="color:#FFFFFF">Copyright © 2022:
Written with &heartsuit; by Jordan Viehmeyer (Dad)
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Javascript-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have not modified the CSS code of the carousel itself, so it is bootstrap standard using the min.css file.
The photos are sized 800 width, 400 height. That is how I'd like them to display, but proportionally.

Remove all style="width:800px; height:400px;" from your code. By adding this you forcing the element to a fixed size, so element wont be responsive.
In your carousel replace .card-img class with d-block w-100 classes, as per this example... (don't use card-img class)
Follow these bs docs... Carousel with indicators
<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="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>

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>

My bootstrap carousel indicators are overlapping my fixed top navigation bar

I am creating a page with a bootstrap carousel and w3.css fixed top navigation bar. Then suddenly when I scroll down the page the indicators of the carousel is overlapping my top navigation.
Here is the picture of the current problem with a red arrow
Here is my code for my top navigation bar
<script>
window.onscroll = function() {scrollFunc()};
function scrollFunc() {
if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
document.getElementById("myTop").classList.add("w3-cyan","w3-card-4");
document.getElementById("myIntro").classList.add("w3-show-inline-block");
} else {
document.getElementById("myIntro").classList.remove("w3-show-inline-block");
document.getElementById("myTop").classList.remove("w3-cyan","w3-card-4");
}
}
</script>
<div id="myTop" class="w3-top w3-container w3-padding-2 w3-theme w3-large">
<!-- <i class="w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-margin-right" onclick="w3_open()"></i> -->
<span id="myIntro" class="w3-hide">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="200px" height="50">
</a>
</span>
</div>
<header class="w3-container w3-theme w3-padding-18 w3-blue">
<h1 class="w3-xxxlarge w3-padding-16">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="400px">
</a>
</h1>
</header>
<nav class="w3-card-4 w3-indigo">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="index.php"><b>Alumni Tracer System</b></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Alumni Registration</li>
<li>News and Events</li>
<li>Job Oppurtunities</li>
<li>Job Oppurtunities</li>
<li>Featured Alumni</li>
<li>Photo Gallery</li>
</ul>
</div>
</div>
</nav>
and for the Bootstrap carousel
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="admin/img/SLIDER1.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER2.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER3.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER4.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER5.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

It is due to higher z-index of carousel indicators.
You can fix by either giving them lower z-index or by giving the navbar a higher z-index.

Increase the z-index property value of navbar to 21

how to fixed a navbar and Carousel image slider in bootstrap

i have a header with a navbar and a Carousel sliding image using bootstrap
how can i fixed this two together on scroll
when the user scroll the website to see the information the navbar and carousel still fixed on the top and the information scroll under the header
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li>
Factory
</li>
<li>
Projects
</li>
<li>
Clients
</li>
<li>
Video
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="row">
<img src="img/logo%20corner.png" class="center-block img-responsive imglogo">
</div>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- 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">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide1.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide2.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide3.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>

If i have understood I give you a link where you can find your happiness.
http://www.w3schools.com/howto/howto_css_parallax.asp
Hope help you :)

I added the full code for you to have as a resource to reference with your document because what you posted is the stock bootstrap template with no input. Double check and make sure you have the latest bootstrap installed and are linking the files correctly. Below I used a CDN, but its better to have it downloaded.
The main thing to make sure you have the fixed header navigation is the following code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
You can find the above code in the below code. Let me know if you have any questions.
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /container -->
</div>
<!-- /navbar wrapper -->
<!-- Carousel -->
<div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<img src="/root/directory/file_path.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small="">
<p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</pthis>
</div>
</div>
</div>
<div class="item">
<img src="/root/directory/file_path.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</body>
</html>

Categories