What could be causing the slider to have a choppy transition between images?

The Issue:

Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have tried various solutions without success. Any help or ideas would be greatly appreciated. Thank you!

HTML:

<div class="container-fluid wrapper-3">
        <div class="row" style="height: 5%;">

        </div>
        <div class="row" style="height: 80%;">
            <div class="col-md-1"></div>
            <div class="col-md-10 d-flex align-items-center justify-content-center">
                <div id="carouselExampleIndicators" class="carousel slide">
                    <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>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="img/slider_1.png" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="img/slider_2.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="img/slider_3.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="img/slider_4.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-md-1"></div>
        </div>
        <div class="row" style="height: 15%;">

        </div>
    </div>

CSS:

.wrapper-3 {
    height: 100vh;
}

.carousel-item img {
    max-height: 90vh;
    width: auto;
}

I have experimented with different approaches such as "max-width" but haven't found an ideal solution yet.

Answer №1

According to Bjorn.B, the issue of layout jumping is a result of using images with different sizes in the carousel. To address this, you may want to adjust the images to have the same layout size and utilize object-fit: contain to prevent distortion:

.wrapper-3 {
  height: 100vh;
}

.carousel-item img {
  height: 90vh;
  width: 90vw;
  object-fit: contain;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container-fluid wrapper-3">
  <div class="row" style="height: 5%"></div>
  <div class="row" style="height: 80%">
    <div class="col-md-1"></div>
    <div class="col-md-10 d-flex align-items-center justify-content-center">
      <div id="carouselExampleIndicators" class="carousel slide">
        <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>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://picsum.photos/200/800" class="d-block" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/400/400" class="d-block" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/800/400" class="d-block" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/800/200" class="d-block" 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-md-1"></div>
  </div>
  <div class="row" style="height: 15%"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Include an additional feature to an already established design

I have been attempting to move an element to the left using the transform property. However, there is already a pre-existing style with transform, which appears as: transform: translate3d(tx, ty, tz) What I am aiming for is to incorporate another property ...

Content within a div that is floated left

The scenario at hand is: HTML Structure: <div id="main"> <div id="a"></div> <div id="b">Some Text</div> </div> CSS Styles: #a{ float:left; width:800px; height:150px; background-color:#CCC; } ...

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

What is the best way to include additional text in a dropdown menu?

I'm trying to add the text "Choose Country" in a drop-down list before the user selects their country. example1 Here is the line of code I used: <option data-hidden="true"> Choose Country </option> However, the phrase does ...

Exploring ng-view navigation in AngularJS

I have come across an SEO issue while working on a static website in AngularJS. Google Webmasters Tools report no crawl errors, but when I attempt to fetch different routes, it consistently returns the same home page result. It seems to be ignoring what ...

Make sure to include the !important declaration when setting the fill property for

When attempting to apply !important to the fill property of an SVG file, I'm encountering issues with the syntax. Despite my efforts, the !important directive is not being correctly applied to the fill property, resulting in the circle element renderi ...

jquery and radio button technology

I am attempting to create a basic function using jquery, but it is not functioning properly. Here is the radio button in question: <input type="radio" id="price" name="shipping" class="styled" /> In the head section of my HTML, I have included the ...

Retrieving information from the query string and showcasing it on a client-side label

I'm facing an issue where I need to update a small part of text in a label based on the query string. The code snippet I am currently using is Text = "after 30 June "'<%=Request.QueryString ("Year")%>'" in the comments field" However ...

leveraging Excel input for data manipulation in Java

I am looking to create a code that will help me generate a line of flight using data from an Excel spreadsheet. The process involves calculating the time between flights, ensuring the plane has enough time on the ground before taking off again, and determi ...

Displaying incorrect symbols with icon fonts

I have successfully integrated icon fonts into my simple web page. Check it out on jsFiddle here My design is similar to this example, but instead of bars, I see a snake icon displayed. How can I fix this issue with the fonts? Here is the code snippet: ...

Challenge with Hovering within Cufon Elements

When utilizing multiple lists and hover states, the parent Cufon style takes over the child. For instance, in the scenario below, when hovering over the Second Level link, it will switch to a different weight. Is there a setting I can adjust to keep the n ...

CSS/HTML: Resolving Internet Explorer's Div Positioning Challenges

I've been struggling to find a resolution for this issue but I haven't been able to come up with anything effective. Here's the basic concept of what I'm trying to achieve. My goal is to have my layout divided into 3 divs. The first se ...

What is the best way to achieve consistent width in a material-ui card component?

How can I ensure that all these cards have the same width? https://i.stack.imgur.com/Ns3zw.png I'm experiencing an issue with achieving uniform card widths when using flexbox in material-ui. How can I resolve this? Is it necessary to utilize Grid fo ...

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

What is causing the failure of generating a DIV element with JQuery?

I'm having trouble creating a div element with a class and appending a child to it. I keep getting no response. What could be the issue? JS content function generateTable() { var procDiv = $("<div class='proc-container'></div>" ...

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

Having trouble getting custom tabs in jQuery to function properly?

I am facing an issue with a simple script I have created. The script is supposed to display a specific div when a user clicks on a link, and hide all other divs in the container. However, when I click on the link, nothing gets hidden as expected. Even afte ...

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

The feature of Jquery click and cursor: pointer only focuses on a single element at a

Recently, I created a navbar that includes a dropdown feature. I encountered an issue where I wanted the dropdown to show up when clicking on the navbar-profile class (which contains the profile picture, name, and chevron icon) in the top right corner. Ho ...