Why does the carousel dissappear after the last last slide? - html

I'm practicing bootstrap and when I click after the last slide, the whole carousel disappears. Even on the first slide, when I click the left arrow to go to the last slide the whole thing still disappears.
<!-- Team Pictures Carousel -->
<div class="row bg-dark rounded-bottom">
<div class="col">
<!-- Carousel Component -->
<div id="carouselExampleControls" class="carousel slide w-50 mx-auto" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/brian.png" class="d-block w-100" alt="some guy named brian">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">CEO: <span class="font-weight-light">Brian M.</span></p>
</div>
</div>
<div class="carousel-item">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/andy.png" class="d-block w-100" alt="another dude named andy">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">CFO: <span class="font-weight-light"> Andy C.</span></p>
</div>
</div>
<div class="carousel-item">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/angela.png" class="d-block w-100" alt="angela?">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">COO: <span class="font-weight-light">Angela W.</span></p>
</div>
<div class="carousel-item">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/amie.png" class="d-block w-100" alt="amie or amy?">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">CTO: <span class="font-weight-light">Amie S.</span></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>
</div>
</div>
</div>
</div>


The item with "COO" was missing the close tag and because of that the "carousel-inner" div was closing in the wrong place. This worked fine:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="row bg-dark rounded-bottom">
<div class="col">
<!-- Carousel Component -->
<div id="carouselExampleControls" class="carousel slide w-50 mx-auto" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/brian.png" class="d-block w-100" alt="some guy named brian">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">CEO: <span class="font-weight-light">Brian M.</span></p>
</div>
</div>
<div class="carousel-item">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/andy.png" class="d-block w-100" alt="another dude named andy">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">CFO: <span class="font-weight-light"> Andy C.</span></p>
</div>
</div>
<div class="carousel-item">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/angela.png" class="d-block w-100" alt="angela?">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">COO: <span class="font-weight-light">Angela W.</span></p>
</div>
</div>
<div class="carousel-item">
<img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/amie.png" class="d-block w-100" alt="amie or amy?">
<div class="carousel-caption bg-dark rounded-pill py-0">
<p class="text-center font-weight-bold mb-0">CTO: <span class="font-weight-light">Amie S.</span></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>
</div>
</div>
</div>

Related

Adding image logo to bootstrap carousel

As I try to add a logo image to the carousel, I have a hard time making sure the logo remains stationary at all times without moving inside the carousel.
<!--logo-->
<div class="logo-image">
<img src="Aaron%20Murillo-Black.png" class="img-fluid">
</div>
<!--Carousel image slider-->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="logo-image">
<img src="Aaron%20Murillo-Black.png" class="img-fluid" alt="Web Site Logo">
</div>
<div class="carousel-item active">
<img src="Dress.jpg" class="d-block w-100" alt="Dress">
</div>
<div class="carousel-item">
<img src="Balloon.jpg" class="d-block w-100" alt="Balloon Fiesta">
</div>
<div class="carousel-item">
<img src="DarkChurch.jpg" class="d-block w-100" alt="Dark Church">
</div>
<div class="carousel-item">
<img src="River%20Falls.jpg" class="d-block w-100" alt="River Cave">
</div>
<div class="carousel-item">
<img src="Wedding.jpg" class="d-block w-100" alt="Couples">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
all my css with this had been a bust.
.logo-image{
width: 10%;
height: 100px;
border-radius: 10%;
overflow: hidden;
margin: auto;
position: relative;
}

Well, if I'm not getting you wrong you want to make the logo stationary and not moving as the carousel moves ?
You could do this in the CSS, by:
Giving the carousel a position of relative and the logo that of absolute

Wrap all your code with div and make it relative then make .logo-image absolute, it will make your logo remain still
.wrap {
position: relative;
}
.logo-image {
position: absolute;
top: 0;
left: 0;
}
<div class="wrap">
<!--logo-->
<div class="logo-image">
<img src="Aaron%20Murillo-Black.png" class="img-fluid">
</div>
<!--Carousel image slider-->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="logo-image">
<img src="Aaron%20Murillo-Black.png" class="img-fluid" alt="Web Site Logo">
</div>
<div class="carousel-item active">
<img src="Dress.jpg" class="d-block w-100" alt="Dress">
</div>
<div class="carousel-item">
<img src="Balloon.jpg" class="d-block w-100" alt="Balloon Fiesta">
</div>
<div class="carousel-item">
<img src="DarkChurch.jpg" class="d-block w-100" alt="Dark Church">
</div>
<div class="carousel-item">
<img src="River%20Falls.jpg" class="d-block w-100" alt="River Cave">
</div>
<div class="carousel-item">
<img src="Wedding.jpg" class="d-block w-100" alt="Couples">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>

How do I make responsive shrink to a carosel or an image on css?

To explain better what I mean, if you use the mobile vision on [this][1] bootstrap page, you'll see how the carousel is adapting to the screen and it's changing it's ratio.
<div class="container">
<div class="row">
<div class="col-lg">
<div id="carouselExampleControls" class="carousel slide one" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="immagini/slider1.jpg" class="d-block w-100 image-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="immagini/slider 2.jpg" class="d-block w-100 image-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="immagini/slider3.jpg" class="d-block w-100 image-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
This is the code of the carousel that I'm using but it remain of the same ratio with every dimension.
[1]: https://getbootstrap.com/docs/5.2/components/carousel/

Bootstrap carousel content disappears unexpectedly after a delay

I tried to put a carousel inside a section of my website (using HTML, CSS, and Bootstrap 5), but the problem is after a little time all the content and the carousel inside that section disappear, then you need to reload the page again, and that disappears again and again.
<section class="bg-info text-dark text-center text-sm-start"data-bs-ride="carousel">
<div class="carousel-item active bg-light">
<div class="container" >
<div class="d-sm-flex align-items-center justify-content-center">
<!-- carousel -->
<div class="carousel slide " id="demo" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/very.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/pubg.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/pes.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- carousel -->
<div class="divtwo">
<h1 id="headerOne1" class="text-warning mx-5 px-1 d-sm-block img-fluid w-50 w-ms-auto">Best <span class="text-info">Games</span> </h1>
<p class="lead paragraph mx-5 px-1">Want more amazing games..?</p>
<button type="button" class="btn btn1 btn-outline-warning">Recommended</button>
</div>
</div>
</div>
</div>
</section>

Remove data-bs-ride="carousel" from your section and "carousel-item active" from your div.
Here the results,
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<section class="bg-info text-dark text-center text-sm-start" >
<div class="bg-light">
<div class="container">
<div class="d-sm-flex align-items-center justify-content-center">
<!-- carousel -->
<div class="carousel slide " id="demo" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/id/237/720/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-sm-block ">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/238/720/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-sm-block ">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/239/720/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- carousel -->
<div class="divtwo">
<h1 id="headerOne1" class="text-warning mx-5 px-1 d-sm-block img-fluid w-50 w-ms-auto">Best <span class="text-info">Games</span> </h1>
<p class="lead paragraph mx-5 px-1">Want more amazing games..?</p>
<button type="button" class="btn btn1 btn-outline-warning">Recommended</button>
</div>
</div>
</div>
</div>
</section>

Bootstrap 5 Carousel Mask Effect

I try to apply the masking effect for Carousel images at bootstrap 5 in the Django web project.
I tried many solutions but nothing work
this is the carousel
<div id="carouselExampleControls" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static '.\images\home\sec1-1.jpg' %}" class="d-block w-100" alt="..." >
<div class="carousel-caption d-none d-md-block ">
<h1>Welcome to Markvira Agency</h1>
<p>Smart digital marketing agency</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static '.\images\home\sec1-2.jpg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Welcome to Markvira Agency</h1>
<p>Smart digital marketing agency</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
i tried the mask tag like this..but effect appear only at text are not mask the whole image slide
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static '.\images\home\sec1-1.jpg' %}" class="d-block w-100" alt="..." >
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"> <!--Mask Tag-->
<div class="carousel-caption d-none d-md-block ">
<h1>Welcome to Markvira Agency</h1>
<p>Smart digital marketing agency</p>
</div>
</div>
I want to make a gray layer over carousel images
like this
I hope you could help me
Thanks

How to add padding around a carousel

So I added a carousel to my home page and it takes up the entire page and doesn't look good. I want to add some padding on all four sides, and I tried by using <div padding:25px> </div> but it doesn't work.
<div padding:25px>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>

Just add to the top :
<div style='padding:25px'>
It should work.

That is not how inline styles work.
You need to put the styles inside the style attribute like so:
<div style="padding: 25px;"></div>
By the way, inline styles are not recommended. You might want to put the styles in an external stylesheet and link that stylesheet with your HTML file.
Thank you.

Just wrap your code into a grid column and you're good to go.
<div class="col-12 col-md-10 col-xl-8 offset-xl-2 offset-md-1">
<div
id="carouselExampleFade"
class="carousel slide carousel-fade"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..." />
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleFade"
data-bs-
slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleFade"
data-bs-
slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>