CODEWITHSUNDEEP
htmlcssbootstrap-4bootstrap-carousel
caiovisk
caiovisk

Reputation: 3819

Page jumps when carousel content changes it height/content

I am facing an interesting behavior on my page when the boostrap carousel is wrapped and the wrapper is position:absolute... so when the page is a bit scrolled down and next carousel-item has a different height the page simply "jumps"...

My home-hero-wrapper is 100vh and the carousel-home-wrapper which wraps the carousel is positioned absolute at the bottom. Regardless the size of the carousel-item it will be positioned at the bottom of the home-hero-wrapper

The Problem: All works fine until you scroll down the page a bit (The carousel must still on the viewport) and on the carousel transition the page simply "jumps"... However home-hero-wrapper does not change size and I can't figure why the sections are behaving like this...

What am I missing? Any tips?

The snippet below is reproducing the issue:

.home-hero-wrapper {
  height: 100vh;
  min-height: 200px;
  position: relative;
}
.carousel-home-wrapper {
  position: absolute;
  bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="home-hero-wrapper bg-info">
    <div class="hero-image" style="background-image: url(https://via.placeholder.com/1024x800);">
    </div>
    <div class="carousel-home-wrapper">
            <div 
              id="carousel_home" 
              class="carousel slide carousel-fade" 
              data-ride="carousel"
              data-interval="1000"
             >
                <div class="carousel-inner">
                    <div class="carousel-item bg-light active">
                        <h2>Content Shorter</h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
                    </div>
                    <div class="carousel-item p-3 bg-light">
                        <h2>Content Longer</h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.</p>
                    </div>
                </div>
            </div><!-- #carousel_home -->
        </div><!-- .carousel-home-wrapper -->
</div><!-- home-hero-wrapper -->
<div class="p-5 bg-warning">
  <h2>Scroll until here</h2>
  <h3>Make sure carousel still visible</h3>
  <p>Waiting until carousel transition... All sections will "jump"</p>
</div>
<div class="p-5">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5 bg-danger">
  <h2>Make sure carousel still visible</h2>
</div>

Upvotes: 2

Views: 1473

Answers (1)

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

Ok, to do so first add the class p-3 to both carousel-item <div> or remove from both.

Secondly, remove all the classes from the <div> with id #carousel_home.

Also, add this CSS: 

.carousel-item{
  height: 130px;
}

Now if the text inside the carousel-item will be shorter than the full width of the page then it will take only that amount of width taken by the text.

And if the text inside the carousel-item will be longer than the width of the page then the text will go to the next line.

Plus it will be anchored with the class home-hero-wrapper ant the bottom of the page. Take a look at the live code with the link below (NEW)

See the live code here (NEW): https://codepen.io/manaskhandelwal1/pen/QWbpvMW

See the live code here (OLD): https://codepen.io/manaskhandelwal1/pen/zYGNyxg

Upvotes: 1

Related Questions