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>
Related
I have a home component in Angular with 2 sections: one with a Bootstrap 5 carousel and the second one with some dummy headings for demo purposes. On a single scroll, I'm able to snap from one section to another.
However, there's a problem when trying to scroll to the bottom of the page as the scroll jumps a few pixels back, therefore not allowing me to see the last few dummy headings. I've managed to find a hardcoded solution (the footer-space div), but I was wondering if there's anything else I could do in this case. I feel I'm missing something, but I don't know exactly what.
img {
height: 84vh;
}
.scroller {
height: 91vh;
overflow-y:scroll;
scroll-snap-type: y mandatory;
}
.scroller section {
scroll-snap-align: start;
}
/* laptop */
#media only screen and (max-width: 1920px) {
.footer-spacer {
height: 8.96vh;
}
}
/* monitor */
#media only screen and (min-width: 1920px) {
.footer-spacer {
height: 4.74vh;
}
}
<section class="scroller">
<section>
<div
id="carouselDark"
class="carousel carousel-dark slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="3"
aria-label="Slide 4"
></button>
<button
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="4"
aria-label="Slide 5"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img
src="../../assets/undraw_travelers.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_investment_data.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_stranded_traveler.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_savings.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Fourth slide label</h5>
<p>Some representative placeholder content for the fourth slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img
src="../../assets/undraw_world.svg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Fifth slide label</h5>
<p>Some representative placeholder content for the fifth slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselDark"
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="#carouselDark"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: black">test</h1>
<h1 style="color: blue">test</h1>
<h1 style="color: red;">test</h1>
<!-- preventing the scroll to jump back when hitting the bottom of the page -->
<!-- <div class="footer-spacer"></div> -->
</section>
</section>
I am creating a carousel.When the images are sliding, it first appears down and then it jumps up on the correct level as shown in the image below. I tried to add height, more width or auto, do not change.
I took the code on the doc of Bootstrap adding my images :
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="media/paysage Ecu.webp" class="d-block w-100 img-fluid" alt="Montain">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="media/galapagos view.jpeg" class="d-block w-100 img-fluid" alt="galapagos view">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="media/forest.jpg" class="d-block w-100" alt="forest">
<div class="carousel-caption d-none d-md-block img-fluid">
<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="#carouselIndex" 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="#carouselIndex" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div><div id="carouselIndex" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndex" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="media/paysage Ecu.webp" class="d-block w-100 img-fluid" alt="Montain">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="media/galapagos view.jpeg" class="d-block w-100 img-fluid" alt="galapagos view">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="media/forest.jpg" class="d-block w-100" alt="forest">
<div class="carousel-caption d-none d-md-block img-fluid">
<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="#carouselIndex" 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="#carouselIndex" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
CSS :
#carouselIndex {
overflow-y: hidden;
width: 60vw;
border: 1px solid red;
}
I used Betastrap 5.2 and I didn't see any problem. Probably, there is an interference with the theme of your site.
Please change the theme and check.
And use the bootstrap data below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
Please tell me how you can align the photo as in the screenshot:
What does it look like now:
Googled for two days, tried in different ways, it does not work :(
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://i.ibb.co/MV160LG/schauraum-banner-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://i.ibb.co/MV160LG/schauraum-banner-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-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://i.ibb.co/MV160LG/schauraum-banner-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-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="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<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>
Please help me please to solve this problem.
Please tell me at least in what direction to move!
background-position: top;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
z-index: -1;
I'm having issues positioning my carousel component at the top the page and to the right of the navbar in large view and under the navbar in small view. I created a template navbar.html file that I allow my other templates to inherit from using django. There seems to be an issue with the content being displayed getting either pushed to the bottom of the navbar or behind it?
{% extends "all_pro_painting/navbar.html" %}
{% load static %}
{% block navbar %}
{# <img class="img-thumbnail rounded-end" src="{% static 'all_pro_painting/img/background.jpg'%}" alt="" width="1000" height="300">#}
<div id="carousel_slides" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel_slides" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel_slides" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel_slides" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'all_pro_painting/img/background.jpg'%}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'all_pro_painting/img/slide2.jpg'%}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'all_pro_painting/img/slide3.jpg'%}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-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="#carousel_slides" 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="#carousel_slides" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
{% endblock %}
I need help to align 3 divs in the middle of the page. I managed them to be aligned horizontally but I can't put them in the middle. I tried but the middle one just go into the third one when I fill the div with something.
https://imgur.com/a/ceNyoHg
Here's the HTML code(I'm using bootstrap):
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="/pfp.jpg" class="card-img-top" alt="...">
<ul class="list-group list-group-flush">
<li class="list-group-item">Name: </li>
<li class="list-group-item">Age: </li>
</ul>
<div id="desc" class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div id="middle" class="col">
Colegiul National "Nicolae Titulescu"
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/cnntcarousel1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/cnntcarousel2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/cnntcarousel3.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="/pfp.jpg" class="card-img-top" alt="...">
<ul class="list-group list-group-flush">
<li class="list-group-item">Name: </li>
<li class="list-group-item">Age: </li>
</ul>
<div id="desc" class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
And here is the CSS code I'm using:
.container {
position: absolute;
top: 40%;
left: auto;
font-family: Lemon Milk;
/*background-color: rgba(255, 255, 255, .4)*/}
#middle {
text-align: center;
color: white;}
I'm using position: absolute; because I have a background image on the page body.
The simplest and flexible way is using flex. Read more help here