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;
}
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'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
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 want my carousel to appear immediately after my navbar but if I remove padding from carousel it appears after my navbar but the navbar stretches far from view in mobile view
<div class="container-fluid m-t-3 p-x-0 "> //Code with padding so it appears under navbar
<div class="container-fluid "> //When I remove margin and padding the navbar stretches too far in mobile view
Navbar on mobile view when I remove padding from carousel
CodePen link
Commented the parts that I'm trying to fix and the problem.
Add the class img-responsive to the parent element of the images in the carousel or to each image in the carousel, this will allow them shrink along with the window size. I added this to your code in code pen at line 63:
<div class="carousel-item active randomize img-responsive">
<img src="http://placekitten.com/700/500" alt="First slide ">
<div class="carousel-caption hidden-md-down">
<h3>Sedefi</h3>
<p>webpage 1</p>
</div>
</div>
<div class="carousel-item img-rounded">
<img src="http://placecorgi.com/700/500?index=random" alt="Second slide">
<div class="carousel-caption hidden-md-down">
<h3>Sedefi</h3>
<p>webpage 2</p>
</div>
</div>
<div class="carousel-item">
<img src="http://placecorgi.com/700/500?index=random" alt="Third slide">
<div class="carousel-caption hidden-md-down">
<h3>Sedefi</h3>
<p>webpage 3</p>
</div>
</div>
</div>
You can read more about styling images with bootsrap here
And here is what it looks like when you use a smaller dislpay:
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