I'm having trouble making the carousel actually slide. It would just swap to next item without any "slide" transition. I've even went through the BS 5 doc and it doesn't do the slide transition either. Has it been removed?
HTML:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-slide ="true" data-bs-ride="carousel" data-bs-interval="1000" data-bs-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active " style = "background-color:red">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style = "background-color:blue">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style = "background-color:yellow">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
CSS:
.carousel-item {
height: 500px;
}
Windows 10 > Display > Tick show animations in windows
Related
I currently want to implement an image carousel from bootstrap on a page. The only problem is, that i have on the first run, when i load the page, the bug that the images load too slowly or it's a general bug, that the next picture is for a half second white. But only on the first run.
Steps to reproduce:
Firefox 109.0 (64-Bit)
Boostrap CSS + JS import [https://getbootstrap.com/docs/5.3/getting-started/download/]
css/bootstrap.css;
bootstrap.bundle.js
EDIT:
Got it fixed to have no more white spaces, but not the nice way.
I made the size of the pictures smaller and now it loads fast enough.
So on my question now is, if it's possible to only slide to the next picture if it's already fulled loaded/rendered.
At around 3s you can zoom in and get deeper into it. https://share.firefox.dev/3wujvGC
Code of the carousel:
<div class="containerCarousel">
<div class="textCentering position-absolute">
<div class="textoverlay">
<h1 class="text-light textVonOverlay mx-3 mx-md-5 mt-5 display-5">Lorem Ipsum</h1>
<h3 class="text-light textVonOverlay mx-3 mx-md-5 mt-1 opacity-75">Lorem Ipsum</h3>
<h5 class="text-light textVonOverlay mx-3 mx-md-5 mt-1">Lorem Ipsum</h4>
<button type="button" class="btn btn-secondary btn-lg mx-3 mx-md-5 mt-5 mb-5" >Lorem Ipsum</button>
</div>
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/background1_barenstein.jpg" class="d-block w-100 heightCarousel " alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background2_barenstein.jpg" class="d-block w-100 heightCarousel " alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background3_barenstein.jpg" class="d-block w-100 heightCarousel " alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background4_barenstein.jpg" class="d-block w-100 heightCarousel" alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background5_barenstein.jpg" class="d-block w-100 heightCarousel" alt="...">
</div>
</div>
</div>
</div>
.heightCarousel{
height: 100vh;
object-fit: cover;
}
.textCentering{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
z-index: 1023;
}
.textoverlay{
width: 80vw;
background-color: rgb(46, 46, 46, 0.7);
}
.textVonOverlay{
opacity: 1 !important;
}
.containerCarousel{
position: relative;
}
I searched through the internet and tried some stuff, but nothing worked.
Read through some bugzilla and some stackoverflow questions, but i didn't find an answer which worked for me.
Edit:
Short video of an mozilla analysis of the problem with some data to identify problems
https://drive.google.com/file/d/1IpeyQBr6pdWN1gD__DPq_aKRprNNoAbw/view?usp=sharing
I've got a Bootstrap crossfade carousel on my website with smooth fade transitions between the slides. I set an equal data-interval value for each slide to 5000 but the problem is that when I test the carousel in my browser the duration of each slide seems different per every one of them. The first slide's duration is the longest. The interval between the second and the third is very short, then between 3rd and 4th is longer again, and - between 4th and 5th is again very short, depsite the fact they have all the same value in the code.
I tried to tweak the interval values - no change. I tried different classes for interval - no change. I also tried to change fade transition CSS - no effect for interval of course. No matter what I do the duration varies per slide.
I tested it in 2 browsers. Same effect.
At least the fade transition looks ok. So where did I make a mistake in the intervals? What to do to make everything of the same duration?
The HTML for the crossfade carousel:
<div id="presentation-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="5000">
<img src="images\slideshow\slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img src="images\slideshow\slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img src="images\slideshow\slide3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img src="images\slideshow\slide4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img src="images\slideshow\slide5.jpg" class="d-block w-100" alt="...">
</div>
</div>
CSS for the carousel:
.carousel.carousel-fade .carousel-item {
display: block;
opacity: 0;
transition: opacity ease-in-out 3s;
}
.carousel.carousel-fade .carousel-item.active {
opacity: 1 !important;
transition: opacity ease-in-out 3s;
}
i'm currently developing a landing page for a startup, while i was making the "hero section" i wanted to use a carousel, everything worked fine until i tried adding the next section, to my surprise the next section was BEHIND the hero section, i tried reading through my code and tweaking a bit on chrome dev tools but i can't seem to find the problem, could you help me?
I've tried changing the position for all of the items in the carousel to static and their display to block to see if it went back to normal without success.
CODE:
HTML
<section id='hero-section'>
<div class="hero-carousel carousel slide" data-ride="carousel">
<div class="carousel-item active" data-interval="8000">
<img class="d-block w-100" src="includes/media/images/slide1.png" alt="">
<div class="carousel-caption d-none d-md-block">
<h2>Alcanza tus sueños</h2>
<p>Los créditos de nómina Axelera son fáciles de obtener y de pagar</p>
<button class='cta-button btn btn-md' type="button" name="button">Solicita tu crédito</button>
</div>
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="includes/media/images/slide2.png" alt="">
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="includes/media/images/slide3.png" alt="">
</div>
</div>
</section>
<section>
<h2>Test</h2>
</section>
CSS
.carousel-item img{
height: 500px;
object-fit: cover;
}
The next section (the one with the h2 "test" tag) should be below not behind the other section.
Just add the Bootstrap class clearfix and you are good to go!
.carousel-item img{
height: 500px;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="clearfix" id='hero-section'>
<div class="hero-carousel carousel slide" data-ride="carousel">
<div class="carousel-item active" data-interval="8000">
<img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
<div class="carousel-caption d-none d-md-block">
<h2>Alcanza tus sueños</h2>
<p>Los créditos de nómina Axelera son fáciles de obtener y de pagar</p>
<button class='cta-button btn btn-md' type="button" name="button">Solicita tu crédito</button>
</div>
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
</div>
</div>
</section>
<section class="clearfix">
<h2>Test</h2>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
I´m a designer with some coding skills, but far from being a programmer. Currently I´m working in a website based on a Bootstrap template, doing good enough except an issue that is driving me nuts: apparently Bootstrap´s CSS is overriding the site CSS, adding a fixed head in the index.html header, which contains a div that contains an image carousel.
Displaying the site in small devices (tablets and cell phones), the carousel hides properly using "hidden-xs" and "hidden-xm" classes, but the header remains with a fixed height of 929px as Element Inspector shows, generating a very tall empty space before the next section.
Below you´ll find the header code, including carousel:
<header id="intro">
<!-- CAROUSEL STARTS -->
<div id="myCarousel" class="carousel slide hidden-xs hidden-xm" data-ride="carousel" data-interval="2000" style="border:1px solid red;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block img-fluid" src="img/header-01.jpg" align="left" alt="Slide 01">
<!-- <div class="carousel-caption">
<p>El conocimiento es libertad</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-02.jpg" alt="Slide 02">
<!-- <div class="carousel-caption">
<p>El respeto a sí mismo</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-03.jpg" alt="Slide 03">
<!-- <div class="carousel-caption">
<p>El respeto a los demás</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-04.jpg" alt="Slide 04">
<!-- <div class="carousel-caption">
<p>Jardín - Primaria - Secundaria</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-05.jpg" alt="Slide 05">
<!-- <div class="carousel-caption">
<p>El conocimiento es libertad</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-06.jpg" alt="Slide 06">
<!-- <div class="carousel-caption">
<p>El respeto a sí mismo</p>
</div> -->
</div>
<!-- Wrapper for slides ENDS -->
</div>
<!-- CAROUSEL ENDS -->
</div>
</header>
And a couple of screenshots:
Home page full size (index.html)
Home page small devices width
Try putting this in your CSS file
#intro {
height: auto !important;
}
This should override the default height pixel.
If you want to have the fullscreen image, then write like this
#intro {
height: 100vh !important;
}
Hope this fixes your problem.
here is the homepage of my blog www.lowcoupling.com
I'd like not show the left and right arrows in the bootstrap carousel
I have tried
.glyphicon-chevron-right{
display:none;
}
(and the same thing for the left arrow)
but it does not seem to work.
This will hide the buttons
.right.carousel-control, .left.carousel-control {
display: none;
}
If you still want to be able to click where the button is drawn, do:
.right.carousel-control, .left.carousel-control {
opacity: 0;
filter:alpha(opacity=0); /* IE support */
}
I took a quick gander, and you are almost there, but Bootstrap's css is taking precidence over your css. Bootstrap has:
.carousel-control .glyphicon-chevron-right{
...
display:inline-block;
}
If you were to assign an arbitrary point value to this, Bootstrap is providing '2 points' to provide the style 'inline-block'.
Because your css is loaded after Bootstrap, simply putting an extra class (and matching Bootstrap's 2 points) before ".glyphicon-chevron-right" should do the trick.
.carousel .glyphicon-chevron-right{display:none;}
Or, if you want your override to be "stronger", putting an id in front gives your override a higher value (approx 256)
#myCarousel .glyphicon-chevron-right{display:none;}
This will work,
.right.carousel-control,
.left.carousel-control
{
visibility:hidden;
}
there is simple solve for that problem. Just remove "a" tags and with into span tags
before
<div id="carouselExampleControls" class="carousel slide" data-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>
<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>
after solved
<div id="carouselExampleControls" class="carousel slide" data-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>
</div>
that's it