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

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"

Related

position img added using bootstrap

I added three images by bootstrap. but these images display in left side of page, while I want them display in center of page.
How can I do it?
this is code of images and bootstrap
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" root="teal" >
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="img/pic1.jpg" class="d-block w-100" alt="..."width="1010"height="600px" >
</div>
<div class="carousel-item" data-interval="2000">
<img src="img/pic2.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
<div class="carousel-item">
<img src="img/pic3.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

According to this article, you can use bootstrap's .center-block css class to center align an image.
You would insert it into your <img> tag like so:
<img class=".center-block">

How to create bootstrap carousel with near by Next/Previous images?

I have created bootstrap carousel. it's working fine but how can i show next and previous images on next and previous buttons.
below in the url you can see what i have done till now.
https://imgur.com/a/vJnSuca
<div class="container image-slides">
<div class="row r">
<div class="col-md-2"></div>
<div class="col-md-8">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/festival-slider.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/festival-slider.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/festival-slider.jpg"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" 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 class="col-md-2"></div>
</div>
</div>
I want to show next and previous nearby images in arrow buttons.now i just have changes arrow to static images.

why isn't there any space between my carousel buttons?

I cant figure out how to make the buttons go to opposite sides of the screen
I originally thought i may have a problem with my divs, but that doesn't seem to be the problem
its probably something simple that im just over looking, but all help is appreciated.
<!--################## review section ###############-->
<section id="reviews" class="py-5">
<div id="slider" class="carousel slide " data-ride="carousel">
<div class="carousel-inner">
<!-- carousel item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto d-flex justify-content-between review-item py-3">
<!-- image -->
<div class="align-self-center ml-3">
<img src="img/customer1.jpg" alt="" class="rounded-circle review-img">
</div>
<!-- text -->
<div class="review-text px-5">
<h2 class="text-capitalize mb-3 primary-color">customer name</h2>
<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, commodi?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- carousel control -->
<a href="#slider" class="carousel-control prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider" class="carousel-control next" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<!--################## end of review section ###############-->
i just want the buttons to be on the opposite side of the page

just a typo, per the docs carousel-control-prev not carousel-control prev
<a href="#slider" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

my slider takes up the whole screen what should I do

I wanted to use the slider as banner pictures 800 x 400 but the slider is getting full screen when i want to test this is the code I wrote Where will I write sizing?
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" width="800" height="400">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

You will need to go use CSS to do this, I think Bootstrap has something to do with it not working in HTML.
.carousel .item {
width: 800px;
height: 400px;
}

How to place two bootstrap carousels in the same page?

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>