How to place two bootstrap carousels in the same page? - html

I am trying to use two bootstrap carousels on the same page. The following is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--BOOTSTRAP LINKS FOR CAROUSEL-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--BOOTSTRAP LINKS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!--START OF NAVBAR-->
<div class="nav-box">
<br>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<img src="logo.png" id="logo"></img>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT S</li>
</ul>
</div>
</nav>
</div>
<!--END OF NAVBAR-->
<!--START OF BOOTSTRAP CAROUSEL-->
<section class="section-white">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:100%; height: 500px !important;">
<div class="item active">
<img src="a.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="b.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="c.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</section>
<!--END OF BOOTSTRAP CAROUSEL-->
<!--START OF RADIO BAR-->
<div class="radio-bar">
<div class="text1">
<h3 id="text1-line1">streams</h3>
<h4 id="text1-line2">shows</h4>
</div>
<div id="audio">
<audio controls>
<source src="viper.mp3" type="audio/mp3" controls="controls">
</audio>
</div>
<div id="podcast-box">
<img src="icon.png" id="image"></img>
<p id="pheading">casts</p>
</div>
<div id="blue-box">
<img src="blue.svg" id="blue-box-image"></img>
<p id="blue-box-heading">show</p>
</div>
</div>
<!--END OF RADIO BAR-->
<!--START OF ABOUT US BAR-->
<div class="about-us">
<h3 id="heading">ABOUT</h3>
<p id="para">*******</p>
<div class="image-box">
<img src="image.jpg" id="image"></img>
</div>
</div>
<!--END OF ABOUT US BAR-->
<!--START OF VIDEO CAROUSEL-->
<div class="container" id="container">
<div class="row" id="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide" id="carousel">
<ol class="carousel-indicators" id="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active" id="action"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner" id="carousel-inner">
<div class="item active" id="item-active">
<div class="row" id="row">
<div class="col-md-3">
<img src="" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.item-->
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control" id="carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control" id="carousel-control">›</a>
</div>
<!--.Carousel-->
</div>
</div>
</div>
<!--.container-->
<script type="text/javascript">
$(document).ready(function() {
$('#Carousel').carousel({
interval: 5000
})
});
</script>
<!--END OF VIDEO CAROUSEL-->
</body>
</html>
I changed the class names to id, because it was overlapping with the previous carousel. Even after doing that the second carousel is overlapping with the element just before it, and the right navigation arrow is not appearing.
I checked the following link: Is it possible to have multiple Twitter Bootstrap carousels on one page?.
Here it says that the navigation href should point to different ids, which I have done. But I am still getting the problem.
Where am I going wrong?


Last edit There you go, i added the carousel function to the thumbnail for the 2nd carousel. :)
jQuery(document).ready(function($) {
$('#myCarousel3').carousel({
interval: 1000000
});
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel2').carousel({
interval: 2000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
#myCarousel {
margin-top: 30px;
}
.thumbnail {
border: none;
}
.thumbnail-modifier {
margin-bottom: 0px;
}
.thumbnails {
display: inline-flex;
width: 100%;
}
.thumbnails-center {
display: flex;
margin: 0 auto;
}
.cursor {
cursor: pointer;
}
.row-fluid {
display: inline-flex;
width: 100%;
}
#myCarousel3 {
margin-top: 20px;
margin-bottom: 50px;
}
.row-center {
display: flex;
margin: 0 auto;
}
.carousel-control-modifier {
background-image: none !important;
color: black !important;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel2">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel2" 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="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<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>
</div>
</div>
</div><!--/Slider-->
</div>
<div class="">
<div id="myCarousel3" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="left carousel-control carousel-control-modifier" href="#myCarousel3" 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 carousel-control-modifier" href="#myCarousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!--/myCarousel-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


Update 3: Here you go, pretty sure this is what you wanted, you need to copy all the code to your own server and it should work! :)
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel2').carousel({
interval: 2000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
#myCarousel {
margin-top: 30px;
}
.thumbnail {
border: none;
}
.thumbnails {
display: inline-flex;
width: 100%;
}
.thumbnails-center {
display: flex;
margin: 0 auto;
}
.cursor {
cursor: pointer;
}
<link href='test2.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel2">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel2" 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="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div>
<!-- Carousel nav -->
<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>
</div>
</div>
</div>
<!--/Slider-->
<div class="row hidden-phone" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="thumbnails">
<div class="thumbnails-center">
<a class="thumbnail cursor" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
<a class="thumbnail cursor" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
<a class="thumbnail cursor" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
<a class="thumbnail cursor" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
<a class="thumbnail cursor" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


You can just change Carousel ID for making these sliders unique. Please see the attached code as an example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Carousel -->
<div id="demo1" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo1" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo1" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo1" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</body>
</html>

Related

Placing a jumbotron over a carousel in Bootstrap

I'm attempting to simply place a jumbotron on top of a carousel in Bootstrap 5.
I figured out a work around, but for some reason my Jumbotron does not overlay the carousel.
The goal here is to have a static message with two active buttons lay on top as the carousel goes through the slides behind it. Any suggestions would be greatly appreciated.
<!-- Jumbo Tron -->
<div class="jumbotron bg-light">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">KVLF The Voice of the Big Bend</a>
<a class="btn btn-primary btn-lg" href="#" role="button">KALP Big Bend Country</a>
</p>
</div>
<!-- Carousel -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/Wstorefront.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Wsocks1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Wstoreinterior1.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>

if your goal is to add carousel slider and on carousel top set some content like buttons, text etc.
Here is an example of the carousel slider with custom content
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Custom content on top -->
<div style="
position: absolute;
bottom: 20%;
left: 50%;
right: auto;
align-items: center;
z-index: 99;
text-align: center;
"><button>Show More</button><p style="
color: white;
">Static contant</p></div>
<!-- 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 src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
</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>

bootstrap carousel not sliding on load

I am working on a slider carousel with bootstrap. My 'active' image loads, but the controls and the slide don't work. As I am following a tutorial, I thought this would be an easy exercise for practice, but I've hit a snag. For anyone concerned about the boostrap.css link I posted the entire html doc ... but its functionality is working well otherwise, so I don't believe that is the issue here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="" content="Trey's Personal Website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trey Coggins | Personal Website</title>
<script type="text/javascript" src="script/index.js"></script>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/index-style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="">Trey Coggins</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Home</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>
</nav>
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/bricks.jpg" alt="">
<div class="carousel-caption">
<h2>Let's build something together!</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/woods.jpg" alt="">
<div class="carousel-caption">
<h2>Take a walk in the woods</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/stone.jpg" alt="">
<div class="carousel-caption">
<h2>Elevate yourself to the next level</h2>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" 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="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="container text-center">
<div class="row">
<div class="col-md-4">
<img class="rounded-circle" src="img/trey-court-headshot.jpg" alt="Trey & Courtney">
<h2>Trey & Courtney</h2>
<p>She's the love of my life!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
<div class="col-md-4">
<img class="rounded-circle" src="img/tootsie-smile.jpg" alt="Mama Tootsie">
<h2>Bodhi & Tootsie</h2>
<p>These two keep us young!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
<div class="col-md-4">
<img class="rounded-circle" src="img/royal-hearts.jpg" alt="Royal Flush">
<h2>Poker</h2>
<p>Join the action!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
</div>
</div>
</body>
</html>

Can you share your HTML page with all the code in it? I would like to see if you have correctly included the bootstrap's javascript/CSS file.
if you have not included Javascript. here are the javascript files that you need to include in your HTML code
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<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="carousel-item item active">
<img class="col-lg-7 d-block w-100" src="img/bricks.jpg" alt="">
<div class="carousel-caption">
<h2>Let's build something together!</h2>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="img/woods.jpg" alt="">
<div class="carousel-caption">
<h2>Take a walk in the woods</h2>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="img/stone.jpg" alt="">
<div class="carousel-caption">
<h2>Elevate yourself to the next level</h2>
</div>
</div>
</div>
<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 href="#myCarousel" role="button" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

Bootstrap carousel moving to top when clicking next and before buttons?

Now I have this carousel I made with Bootstrap code:
<div id="carouselExample" class="carousel slide d-none d-sm-none d-md-block" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row logo justify-content-center">
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row logo justify-content-center">
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
When I press next and prev butttons, the page moves itself to the top of the browser. How can I disable this?
Thanks!

I have the same problem on my site.
Fix:
href="#carouselExample" change to href="/#carouselExample"

try to remove
href="#carouselExample"

Carousel not responding to screen size as expected

I am learning Bootstrap 3 and have a simple page I am working on that only consist of a top nav bar, carousel, and footer.
The page looks OK at desktop size. When it shrinks to mobile size I have too much white space. If I have to add more content to fill it I will but is there an alternative to avoid doing that. I like the simpleness with just the carousel.
Is there a way to make it look nice on a mobile the way I have it?
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<!-- Fixed navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<br />
<!-- Begin page content -->
<div class="row clearfix">
<div class="col-xs-12 column">
<div class="carousel slide" id="carousel-491568">
<!-- <ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-491568">
</li>
<li data-slide-to="1" data-target="#carousel-491568">
</li>
<li data-slide-to="2" data-target="#carousel-491568">
</li>
</ol> -->
<div class="carousel-inner">
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!--<div class="carousel-caption">
<h2>NEW Client!</h2>
<p></p>
</div> --></div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p></p>
</div> --></div>
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p> </p>
</div> --></div>
</div> <a class="left carousel-control" href="#carousel-491568" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-491568" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<div id="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<!--<p class="footer-block">Footer</p> -->
<p><i class="fa fa-envelope fa-1x"> Questions?</i> | <i class="fa fa-mobile fa-1x"> (740) 564-9876</i>
</p>
<p>Copy Here</p>
</div>
<div class="navbar-text pull-right"> <a class="btn btn-social-icon btn-facebook" href="#" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#" target="_blank">
<i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle demo

I suggest to modify the classic carousel html script using a background image and adjusting the size in your css file accordingly.
here you will find an html example:
<div class="container">
<!-- Header 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></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>
</div>
</div>
and your css example code:
/* CSS used here will be applied after bootstrap.css */
/* -------carousel slides----*/
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-indicators li {
border-color: #C0C0C0;
}
.carousel-indicators .active {
background-color: #c0c0c0;
}
.carousel-inner {
margin-bottom:50px;
}
.carousel .item{
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 400px;
}
.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
Bootply example

Layout messed up in bootstrap

I wrote a simple web page for experiment:
Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<!-- <div class="navbar-header"></div> -->
<center>Menu Bar!</center>
</nav>
</div>
<div 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./imgs/index.jpeg" alt="Chania">
</div>
<div class="item">
<img src="./imgs/index1.jpeg" alt="Chania">
</div>
<div class="item">
<img src="./imgs/index2.jpeg" alt="Flower">
</div>
<div class="item">
<img src="./imgs/index3.jpeg" alt="Flower">
</div>
</div>
<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>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="well"></div>
</div>
<div class="col-xs-4">
<div class="well"></div>
</div>
<div class="col-xs-4">
<div class="well"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="well"></div>
</div>
</div>
<nav class="footer">
<nav class="container">
Footer!!
</nav>
</nav>
</body>
</html>
And the web page is like this:
Footer isn't coming up properly. Carousel isn't working properly. But the page is responsive and loads properly in various screens. How can I fix it?

Ensure that your images are something that can be found. By appearance alone it seems that your code was able to find index.jpeg but not any of the others. Try using index.jpeg all 4 times and see if that helps.
<div class="item active">
<img src="./imgs/index.jpeg" alt="Chania">
</div>
<div class="item">
<img src="./imgs/index.jpeg" alt="Chania">
</div>
<div class="item">
<img src="./imgs/index.jpeg" alt="Flower">
</div>
<div class="item">
<img src="./imgs/index.jpeg" alt="Flower">
</div>