We Keep Coding

Why does my Bootstrap carousel only move once?

I'm trying to implement a Bootstrap Carousel into my website however I am having an issue with it where it will only move once and will become unresponsive. I've checked the ordering of the files and that doesn't seem to be an issue. So this has left me stumped on what is causing my issue.
HTML:
<div class="container bg-secondary" id="projectContainer">
<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="d-block w-100" src="styles\media\gazeteerScreenShot.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerInfoScreenShot.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerMarkerScreenShot.png" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerWebcamScreenShot.png" alt="Fourth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" onclick="$('.carousel').carousel('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" onclick="$('.carousel').carousel('next')">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
How my JS files are ordered:
<!-- jQuery Required File -->
<script type="text/javascript" src="libs\jQuery\jquery-3.6.0.min.js"></script>
<!-- The Main Javascript file, this contains all our jQuery and PHP -->
<script type="text/javascript" src="libs/js/script.js"></script>
<!-- Bootstrap JS -->
<script type="text/javascript" src="bootstrap-5.1.3-dist\js\bootstrap.bundle.min.js"></script>
Javascript/jQuery:
$(document).ready(function() {
$('.carousel').carousel({
ride: "true",
interval: 1000
});
});
$(document).ready(function() {
$('.carousel').carousel({
ride: "true",
interval: 1000
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container bg-secondary" id="projectContainer">
<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="d-block w-100" src="styles\media\gazeteerScreenShot.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerInfoScreenShot.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerMarkerScreenShot.png" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerWebcamScreenShot.png" alt="Fourth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" onclick="$('.carousel').carousel('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" onclick="$('.carousel').carousel('next')">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
How my JS files are ordered:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

The primary problem is that you were one indicator short. The script was erroring when it tried to find the last one.
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at st._setActiveIndicatorElement (carousel.js:364)
at st._slide (carousel.js:435)
at st.next (carousel.js:142)
at Function.carouselInterface (carousel.js:526)
at HTMLDivElement.<anonymous> (carousel.js:535)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at S.fn.init.jQueryInterface [as carousel] (carousel.js:534)
at HTMLAnchorElement.onclick (js:37)
You seem to be missing -bs in your data attributes. See the docs.
Also, no Bootstrap library is going to call for onclick attributes in the markup. That's what the data attributes do.
$(document).ready(function() {
$('.carousel').carousel({
ride: "true",
interval: 1000
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container bg-secondary" id="projectContainer">
<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>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Fourth slide">
</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="sr-only">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="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

How to make a Carousel with more than 3 images in Bootstrap?

I'm trying to add more images to my Carousel in Bootstrap. I initially just added this (below) to the ordered list that is class="carousel-indicators"
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
And the new slide (below) inside the div class="carousel-inner" tag along with the other three initial slides.
<div class="carousel-inner mx-auto">
<div class="carousel-item">
<img src="pic.jpg" class="d-block w-100" alt="pic">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
and when I run the website, scroll through the carousel, and get to the last picture it breaks and I can't go back to any previous pictures or go forward anymore.
I tried the code that was listed in another question titled "Bootstrap 4 Multi Carousel show 4 images instead of 3" and that just broke the carousel completely. Three of the four images appear at once on the screen in a column, one containing the carousel controls. When you press any of the controls the carousel disappears.

This is a Slider with 5 images, I hope useful for you.
<!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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
<li data-target="#demo" data-slide-to="4"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1580238047299-558e582427bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide one" width="1100" height="500">
<div class="carousel-caption">
<h3>Slide One</h3>
<p>Description slide one</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1572130456602-fed3019a174e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide two" width="1100" height="500">
<div class="carousel-caption">
<h3>Slide Two</h3>
<p>Description slide two</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1550828553-bb30dc55dc25?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide three" width="1100" height="500">
<div class="carousel-caption">
<h3>Slide Three</h3>
<p>Description slide three</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1504406438164-c0e042535100?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide four" width="1100" height="500">
<div class="carousel-caption">
<h3>Slide Four</h3>
<p>Description slide Four</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1571407509209-73d3e4a45892?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide five" width="1100" height="500">
<div class="carousel-caption">
<h3>Slide Five</h3>
<p>Description slide Five</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>

here a example. The class it's from Bootstrap.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>

The code below shows a carousel with 5 images.
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="4.jpg" alt="Fourth slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="5.jpg" alt="Fifth slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</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>

Bootstrap Carousel not interactive

I am trying to add a carousel on my website and am following the tutorials on w3 and bootstrap website itself. I am not able to make the carousel advance with the buttons on screen. I have even tried copy/pasting code straight from the tutorials with no success. The code for carousel is as follows
<div id="demo" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.w3schools.com/bootstrap/la.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#demo" 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="#demo" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
On the screen I get the first image printed, but when I try to use the arrows to advance or try clicking the indicators at the bottom nothing happens. I am guessing my issue is with my indicators... but I am not able to see what is wrong.

How to change carousel image slider indicators(arrows) color only on the second slide?

how can i change the carousel image slider indicator arrows only on the second image slide???
On the first slide i want to be black color, but when the image slide to 2nd slide i want to set the indicators to white color.
Is this possible???
I tried to create id tag on second slide, but its not helped, someone who is expert in CSS know how to do this???
The big problem is i can't target in CSS only the second slide carousel icons,and i don't know how to do this.

Here is the HTML code,this is the Carousel image slider sample:
<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="d-block w-100" src="1.jpg" alt="First slide">
<div class="carousel-caption">
<h2 id="fadeuptext" class='animated fadeInUp' style="animation-delay: 1s">Hello</h2>
<h2 id="fadelefttext" class='animated fadeInLeft' style="animation-delay: 2s">World</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="2.jpg" style="height:797px;" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="3.jpg" style="height:797px;" 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>
And i want to target the second image slider arrow icon in CSS to set the arrow color to white.
carousel-control-next, .carousel-control-prev

Without seeing your code I cannot be sure, but you should be able to use an nth-child selector like this: .target:nth-child(2) { // styles here }
For more information on nth-child selectors you can check out this article on W3 Schools: https://www.w3schools.com/cssref/sel_nth-child.asp

bootstrap carousel image height

i'm having some problems with the images in bootstrap v4 image carousel. If i scale down the browser width the height of image stays the same but the width of image getting smaller so the image gets very stretched out on the height.
I have been looking at similar threads here on stackoverflow and tried everything i found in the comments but it still does not work. So i decided to make a new thread about this.
Here is a codepen link https://codepen.io/anon/pen/owNyyx but i paste the code here too if you do not wish to visit codepen :)
So here is the code i have
<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">
<div class="carousel-item active">
<img class="d-block img-fluid" src="images/image1.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random Title for image1</h3>
<p>Random description1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image2.png" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image2</h3>
<p>Random description2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image3.png" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image3</h3>
<p>Random description3</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>

It's because the img parent, .carousel-item is display: flex and the img is a flex-child, so it's "stretching" via the default align-items: stretch on the parent.
A number of ways you can fix this. Easiest is probably to give align-items a value other than stretch.
Or if you don't want to apply custom CSS and keep your changes in the markup, wrap each img in a block element like div or figure or whatever works for your site.
.carousel-item {
align-items: flex-start;
}
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://lorempixel.com/1900/500" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Cheap prizes for hairstyling</h3>
<p>Good prizes to style your hair</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/1900/500/cats/2" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>3 Years of experience as Hairstylist</h3>
<p>Awesome results !</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/1900/500/cats/3" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Some random caption text</h3>
<p>Some random description</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>