Issues with the functionality of Bootstrap 4's carousel-fade feature

I'm encountering an issue with Bootstrap's carousel. I have a set of images with varying resolutions and aspect ratios, and when I apply the carousel-fade effect, the animation appears glitchy when two images with different ratios are displayed next to each other.

I'm curious if there is a solution or workaround to address this problem completely.

<div id="demo" class="carousel slide carousel-fade" data-ride="carousel" style="width: 800px;">
<ul class="carousel-indicators" id="car_ind">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" alt="Los Angeles" />
    </div>
    <div class="carousel-item">
        <img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" alt="Chicago" />
    </div>
    <div class="carousel-item">
        <img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" alt="New York" />
    </div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"> </span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"> </span>
</a>

Find the demo here.

htmlcssbootstrap-4

Answer №1

The primary concern at hand is the resolution of your images.
If the resolutions differ, it's evident that the slide transition will appear choppy. This can be rectified by ensuring the image resolutions are the same.

Simply replace this section in your code and test it out.

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" class="carousel-img-size" alt="Los Angeles" />
    </div>
    <div class="carousel-item">
        <img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" class="carousel-img-size" alt="Chicago" />
    </div>
    <div class="carousel-item">
        <img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" class="carousel-img-size"alt="New York" />
    </div>
</div>

CSS snippet:

.carousel-img-size {height:200px ; width:400px;}
Adjust the width and height according to your needs. :)

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

JavaScript Function to Retrieve URL Parameter in PHPIn this tutorial

I'm currently working on an HTML5 game where each level has its own dedicated HTML page. The results of each level are saved in a JavaScript variable. My question is, how can I pass this information to the next page using the URL? I was considering ...

phpjavascripthtmlurl

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

javascripthtmlcssangularangular-material

Altering webpage content through the use of Ajax

I need a solution for dynamically updating web page content using JavaScript AJAX. One idea I had was to store different div layouts in separate files, like so: BasicDiv.div: <div> <p>Some Text</p> <button> A Button </ ...

javascripthtmlajax

Achieve full-width centered div styling

I am facing a scenario where there are 3 divs, with the first and third div having width specified. I am looking to make the second div fill up the remaining space. Check out this Fiddle for reference: http://jsfiddle.net/YzUQy/ #div1{ height:auto; ...

csshtml

Table cell smaller than div

I want to maintain the size of a table cell while having a larger div float over it. Is there a way to manipulate CSS and elements to achieve this without resizing the table cell? ...

javascriptcsshtml-tablecss-tables

Why is the content overlapping the slider once it ends?

I have been working on a slider that functions perfectly, however, I am facing an issue where the content of the web-page is overlapping with slides 2-3 of the slider. I do not want to set a fixed height for the slider but still want the content after the ...

javascripthtmlcsssliderposition

Do you think there is a more efficient way to solve this issue?

const [active, setActive] = React.useState(["active", "", "", "", ""]);``your unique text`` const hrefs = React.useMemo( () => ["/", "/about", "/skills", "/projects", "/contact"], [] ); React.useEffect(() => { setInterval(() => { ...

javascripthtmlreactjsmaterial-ui

Can someone assist me in collapsing one element while expanding another in Bootstrap 4?

Incorporating four div cards functioning as buttons to collapse and expand information beneath the card row has resulted in unexpected behavior. Clicking on one card should expand its information while collapsing the previously expanded card, but the imple ...

javascripthtmlcssbootstrap-4

Maximizing input spacing with Bootstrap3

I am working on a single page application using Bootstrap 3 and AngularJS. Instead of using a datepicker to select dates, I want to have separate inputs for day, month, and year. Here is the HTML code for the date fields: <div class="col-m ...

htmlcssangularjstwitter-bootstrap-3

What is the best method to verify image dimensions and size for three distinct target platforms, all of which have different image dimensions but the same size, within

I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...

htmlvue.jsvuejs2vuetify.js

Stop users from being able to copy text on their smartphones' internet browsers

I am currently working on creating a competitive typing speed challenge using JavaScript. Participants are required to type all the words they see from a div into a textarea. In order to prevent cheating, such as copying the words directly from the div, o ...

javascriptphpjqueryhtmlcss

File-loader mistakenly generates 2 images and associates them with the incorrect one

I have encountered an issue with file-loader where it is creating two separate images in my build folder. One image is named correctly and saved in the correct path, while the other one is named [hash].png (default) and is stored directly in the build dire ...

htmlimagewebpackwebpack-file-loaderfile-loader

The divs are crashing into each other and moving at varying speeds

I have created a mini game inspired by diep.io on codepen, where you can upgrade your reload and shooting capabilities. However, I have encountered an issue where the bullets start moving at different speeds and end up overlapping each other after shooting ...

javascripthtmlcss

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

htmlcss

To implement an array correctly, remember that in_array() requires the second parameter to be an array, not a string

What is the best way to resolve this issue? Error: in_array() expects parameter 2 to be array, string given in C:\xampp\htdocs\php\index.php This is my current code: if (!isset($_GET['jenis'])) { $jenis = ""; } else { ...

phphtmlarrays

Shifting the background image as we reach its limit

I'm creating a website for my company, but I struggle with HTML. One feature I want is to have a background image that stays static while reading the site, but then follows the user when they reach the end of the image. I know how to make an image f ...

htmlbackground

Javascript Flickering Effect in HTML5

Currently, I am in the process of creating a simple game using javascript without jQuery. However, I am facing an issue with flickering on the canvas due to the clearing command. After researching solutions online, I came across suggestions for implementin ...

javascripthtmlbuffering

Opening a window using Javascript with a PHP Ajax response

I'm attempting to use echo in a controller to return the content below in an AJAX response: $url = url('/expert-profile-view')."/".$request->ticket_id."/".$key->user_id; $url = "<a onclick='window.open('$url','m ...

javascriptphpjqueryhtmlajax

Link numerous number-type inputs together

I'm looking to create a form with 6 input fields of type number. Each label will have specified min and max values. The challenge is that if I set one field to be between 0-50, for example in red, then the next field in yellow can't be from 49-70 ...

javascripthtmlreactjsinput

The carousel feature in Angular JS is malfunctioning

My angular carousel is not working properly and I am facing issues. You can view the carousel here. The controller in my Angular code does not seem to be calling out the images. To see the source code, you can click here. I have followed the coding demon ...

javascripthtmlangularjstwitter-bootstrap