Bootstrap 4.0 Carousel not working - html

the bootstrap carousel in bootstrap 4.0 is not working, i have checked everything and written the code 100% the same:
<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/pic03.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/pic01.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/pic02.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>
The images simply show up below each other and the left and right buttons like links, as if bootstrap isn't even referenced.

.carousel-inner img {
width: 100%;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<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>
i have insert here and it's working. you has check jquery and bootstrap js+css?

Related

Button on carousel indicator

I have a website that uses bootstrap, I have a issue with carousel indicator the Know more button on the captain not working on most screens specifically a big screen.
My code:
<section class="slider_section">
<div id="myCarousel" class="carousel slide banner-main" 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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="images/image1.png" alt="First slide">
<div class="container ">
<div class="carousel-caption relative d-block">
<h1><br><strong class="cur">Person 1</strong></h1>
<p>Admin</p>
<div class="button_section"> <a class="main_bt" href="person1.html">Know More</a></div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="first-slide" src="images/image2.png" alt="First slide">
<div class="container">
<div class="carousel-caption relative d-block">
<h1><br><strong class="cur"> Person 2</strong></h1>
<p> User</p>
<div class="button_section"> <a class="main_bt" href="person2.html">Know More</a></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev" style="width: 5%;">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next" style="width: 5%;">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
What is the issue and how do you solve it??

Fit the image inside the carousel, cant seem to fix it

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>

Manual carousel with all aligned images

I have a bootstrap carousel but he is automatic and manual. I wanted to change him in order to use it only manually and I want to separate the items with spaces.
This is my carousel html :
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style=" width:608px; height: 420px !important;">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/image/Meduse-aurelie.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/Merou-lanceole.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/Iguane.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/requin-marcheur.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
And this is my carousel css :
.carousel-item {
margin-left: 20px;
}
I have this result :
Someone can help me please ?

Adding carousel to the page

The carousel isn't working as it supposed to work. I've checked the code several times but it seems I don't know why there's no transition between the photos
I've tried adding the carousel to my webpage but somehow only the active photo is being displayed. There is no transition in the photo-set.
<div class="container">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/slide_01.jpg" class="d-block img-fluid" alt="">
</div>
<!--carousel item-->
<div class="carousel-item">
<img src="img/slide_02.jpg" class="d-block img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="img/slide_03.jpg" class="d-block img-fluid" alt="">
</div>
</div>
<a href="#main-slider" 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="#main-slider" 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>
The three photo set "slide_01.jpg" ,"slide_02.jpg","slide_01.jpg" should change on the click of the "carousel-control-next" button.
Make sure you have included all the necessary libraries for the carousel to work.
If you are using Bootstrap v4.2 then you need the following
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
I copied your HTML code and it works...
See demo below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<h2>demo</h2>
<div class="container">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
<!--carousel item-->
<div class="carousel-item">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
</div>
<a href="#main-slider" 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="#main-slider" 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>

add link at the bottom of each image in bootstrap carousel

How can I add links to the images in the bootstrap carousel? I don't want the links or text over the carousel. I want on the bottom of each picture. I meant after the each picture
<div class="container">
<h1 style="margin-left:483px; margin-bottom:50px;"> Projects </h1>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/TekClasses.PNG" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="images/sppeder.PNG" alt="Chicago" style="width:100%;">
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="fa fa-chevron-left" style="margin-top:250px;"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<i class="fa fa-chevron-right" style="margin-top:250px;"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
With some simple css codes you can do. Check out this https://codepen.io/peshraw-h-ahmed/pen/JvKeME
HTML
<div class="w-25">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/350x250" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-dark">Some example text</h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/350x250" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-dark">Some example text</h5>
</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>
CSS
.carousel-caption{
display:block;
position:static;
padding:0;
}