i want to make a slider using bootstrap carousel but my slider does not slide it doesnt slide even when i click on the button
i tested many other bootstrap sliders and i have the same problem with them,i found many questions in stack overflow but they were all javascript
<div class="container">
<div class="main">
<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">
<a href="hkh.html">
<div class="carousel-item ">
<img class="d-block w-100" src="https://fortniteinsider.com/wp-content/uploads/2019/10/Fortnite-Chapter-2-Season-1-Loading-Screen-Leaked-2.jpg" alt="Third slide">
<div class="slidetoppage">
</div>
<div class="carousel-caption d-none d-md-block">
<h5>test title 3</h5>
<p>test desc</p>
</div>
</div>
</a>
<a href="gh.php">
<div class="carousel-item ">
<img class="d-block w-100" src="https://assets.pcmag.com/media/images/668289-fortnite-chapter-2.jpg?thumb=y&width=1280&height=720" alt="First slide">
<div class="slidetoppage">
</div>
<div class="carousel-caption d-none d-md-block">
<h5>test title 2</h5>
<p>test desc</p>
</div>
</div>
</a>
<a href="gooz.php">
<div class="carousel-item active">
<img class="d-block w-100" src="https://assets.pcmag.com/media/images/668289-fortnite-chapter-2.jpg?thumb=y&width=1280&height=720" alt="Second slide">
<div class="slidetoppage">
</div>
<div class="carousel-caption d-none d-md-block">
<h5>test title 1</h5>
<p>test desc</p>
</div>
</div>
</a>
<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>
You should include your js files. The ones which are shown below;
<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>
Here is also the the link of bootstrap that it explains what to do at the very beginning: Bootstrap Introduction
Related
I am trying to fit the image inside the carousel, but I can't seem to fix it. Here is my css code:
<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="images/Products/keyboard.jpg" alt="First slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Welcome to LebShops</h5>
<p style="color:black">Proud to be Lebanese</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Products/mouse.jpg" alt="Second slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Enjoy our vast selection of products</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Products/airpods.jpg" alt="Third slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Whatever you need we got it !</h5>
<p style="color:black">Cash on delivery</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>
How can I fit my picture inside this carousel?
I've used css to adjust its height
I've checked other people's questions but it didnt help me.
Please see the below snippet. I have used different size images in the gallery.
The only change you need to add is css
img{
object-fit: cover;
vertical-align: middle;
border-style: none;
height: 70vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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="https://picsum.photos/id/100/200/250" alt="First slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Welcome to LebShops</h5>
<p style="color:black">Proud to be Lebanese</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/id/100/500/300" alt="Second slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Enjoy our vast selection of products</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/id/100/300/350" alt="Third slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Whatever you need we got it !</h5>
<p style="color:black">Cash on delivery</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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
this is the code i am not able to make the carousel full screen
i have used width 100% still it doesnt change occupy the whole screen
i used bootstrap in this project
would be helpful if someone can help me. thank you
<html>
<head>
<link href="homepage.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
.container{
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<header>
<div class="slide">
<div class="container p-4">
<div class="w-100 h-50">
<div class="carousel slide" id="carouselExample" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="roughslide1.jpg" alt="FIRST SLIDE" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="roughslide2.jpg" alt="SECOND SLIDE" class="d-block w-100 h-100">
</div>
<div class="carousel-item ">
<img src="roughslide3.jpg" alt="THIRD SLIDE" class="d-block w-100 h-100">
</div>
</div>
<a href="#carouselExample" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PREVIOUS</span>
</a>
<a href="#carouselExample" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">NEXT</span>
</a>
</div>
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Your carousel is inside a div with the class container. In Bootstrap containers on default have a max-width that depends on the breakpoint.
Breakpoint container-width
xs | 100%
sm | 540px
md | 720px
lg | 960px
xl | 1140px
You can however change it to container-fluid to avoid that native
scaling of containers.
You added a p-4 class to your container as well, I guess
that's intentional, but will add a padding to each side.
Here is the documentation.
Bootstrap's carousel class sets max-width and class p-4 sets padding so that there always remains space on the sides. If you get rid of these classes your carousel will take the full width (assuming that's all the code you have).
Change container class to container-fluid and it solve your problem
To fix your snippet I had to make two changes only:
first removing the uncalled for <div class="container p-4"></div>and
<div class="w-100 h-50"></div>
and then I made sure to change the h-100 class you give to img tag to be vh-100 that will make sure the image is filling the page and it will be responsive without any problem. because it will always take 100% of the height of the viewport.
Here is your code with the fix:
<header>
<div class="slide">
<div class="carousel slide" id="carouselExample" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/image.jpg" alt="FIRST SLIDE" class="d-block w-100 vh-100">
</div>
<div class="carousel-item">
<img src="assets/images/image.jpg" alt="SECOND SLIDE" class="d-block w-100 vh-100">
</div>
<div class="carousel-item ">
<img src="assets/images/image.jpg" alt="THIRD SLIDE" class="d-block w-100 vh-100">
</div>
</div>
<a href="#carouselExample" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PREVIOUS</span>
</a>
<a href="#carouselExample" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">NEXT</span>
</a>
</div>
</div>
</header>
Also, Check this working snippet I hope this can be any help.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="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>
<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 src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </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>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
In my ecommerce project, I'm creating a carousel but, unfortunately, the size of each image is different. I want all images to fit the same size frame despite their original sizes.
<div id="carouselExampleControls" class="carousel slide w-100 p-3 h-1" data-ride="carousel">
<div class="carousel-inner">
<h1>Hot & Trends</h1>
<hr>
<div class="carousel-item active">
<img src="media/images/1.jpg" class="img-fluid" alt="First Product">
<div class="carousel-caption d-none d-md-block">
<h5>Product Name</h5>
<p>Description</p>
</div>
</div>
<div class="carousel-item">
<img src="media/images/2.jpg" class="img-fluid" alt="Second Product">
<div class="carousel-caption d-none d-md-block">
<h5>Product Name</h5>
<p>Description</p>
</div>
</div>
<div class="carousel-item">
<img src="media/images/3.jpg" class="img-fluid" alt="Third Product">
<div class="carousel-caption d-none d-md-block">
<h5>Product Name</h5>
<p>Description</p>
</div>
</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>
<hr>
</div>
select the img and set width and heigh of image 100%
the problem will solve
HTML-Code:
<section id="slider">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleControls" data-slide-to="1"></li>
<li data-target="#carouselExampleControls" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
<div class="container">
<div class="carousel-caption text-right mb-5">
<h5 class="display-3">Product Name</h5>
<p class="lead">Description</p>
</div>
</div>
</div>
<div class="carousel-item carousel-image-2">
<div class="container">
<div class="carousel-caption text-right mb-5">
<h5 class="display-3">Product Name</h5>
<p class="lead">Description</p>
</div>
</div>
</div>
<div class="carousel-item carousel-image-3">
<div class="container">
<div class="carousel-caption text-right mb-5">
<h5 class="display-3">Product Name</h5>
<p class="lead">Description</p>
</div>
</div>
</div>
</div>
<a href="#carouselExampleControls" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#carouselExampleControls" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
CSS-Code:
.carousel-item {
height: 450px;
}
.carousel-image-1 {
background: url('../image/image1.jpg');
background-size: cover;
}
This will work fine..
Look like this example. I hope it is as you imagined it. Now you just have to adjust your code like this ...
.carousel {
height: 200px;
}
.carousel-item,
.carousel-inner,
.carousel-inner img {
height: 100%;
width: auto;
}
.carousel-item {
text-align: center;
}
#portfolio {
background: #356;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
<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">
<section id="portfolio" class="page-section">
<div id="reviews" class="container-fluid">
<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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class='img-fluid' src="https://images.pexels.com/photos/2409628/pexels-photo-2409628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="...">
<div class="carousel-caption d-md-block">
<h5>Title</h5>
<p>Description</p>
</div>
</div>
<div class="carousel-item">
<img class='img-fluid' src="https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" alt="...">
<div class="carousel-caption d-md-block">
<h5>Title</h5>
<p>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>
</div>
I have a problem with the carousel from Bootstrap 4.3.1. Bootstrap.css is not customised. It works fine in Google Chrome, but in Firefox and Internet Explorer it has a problem with scaling the pictures into a smaller size?
You can see the problem here on the landing page: https://e90-parts.de/
Could you help me to fix it, please?
Here is the code. It's an edited version from the example on the Bootstrap page.
<div id="welcome" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#welcome" data-slide-to="0" class="active"></li>
<li data-target="#welcome" data-slide-to="1"></li>
<li data-target="#welcome" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://www.kohl.de/webshop/media/image/20/7d/60/20685035c8a385247a18.jpg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-block">
<h5>Teileauswahl</h5>
<a class="btn btn-primary" href="#Kategorien">Kategorie auswählen</a>
</div>
</div>
<div class="carousel-item">
<img src="images/parts/8273.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-block">
<h5>Navigationssysteme</h5>
<a href="index.php?site=parts&page=navi" class="btn btn-primary"
>Android 9.0 Navis</a
>
</div>
</div>
<div class="carousel-item">
<img
src="https://cdn.autodoc.de/thumb?id=7583929&m=0&n=0&lang=de&ccf=21876029"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-block">
<h5>Fahrwerke</h5>
<a class="btn btn-primary" href="index.php?site=parts&page=chassis"
>Fahrwerke</a
>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#welcome"
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="#welcome"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<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>
problem is solved. It was caused by an external carousel which was included on the page in another file. There was some additional code in the which edited the script and the style from the carousel.
Hey I am wanting to have 3 slides but to have a static image instead of each slide having it's own background.
I am not sure on how I would do so. Would you care to shed some light?
You would want to use a transparent png image.
Include image in static as well as template folder. Name images as image1.image2 and image3 and copy the below code in Html file and hence your carousel will work.
<!carousel Starts from here>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid pt-5" >
<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="image1" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>First Image</h5>
<p>Welcome to Management Application </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 " src="image2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 " src="image3.jpg" 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>
<!carouel ends here>```