Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel with only slides (https://getbootstrap.com/docs/4.5/components/carousel/). To test it out, I added some color and height styling to the div elements. Here is the snippet of the code:

.carousel-item {
  height: 100px;
}
<!-- Bootstrap v4.5.2 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedec1dedecbdc80c4ddee9f809f98809f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red;">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item" style="background-color:blue;">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color:yellow;">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

It seems everything is functioning correctly except for the sliding animation when using Bootstrap v4.5.2. Strangely, if I switch back to v4.0.0 of Bootstrap (using the same code), the carousel works perfectly fine:

.carousel-item{
  height: 100px;
}
<!--Bootstrap v4.0.0 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30405f404055421e5a4370011e01061e01">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause: "hover";>
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red;">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item" style="background-color:blue;">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color:yellow;">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

However, I am keen on sticking with the latest version of the framework if possible. It's interesting to note that in the documentation pages, the sliding animation works with example slides in v4.0.0 (https://getbootstrap.com/docs/4.0/components/carousel/), but not in v4.5.2 (https://getbootstrap.com/docs/4.5/components/carousel/). Could this be a bug in the newer version or an error on my end as a beginner? Appreciate any insights or solutions you can provide. Thank you!

htmlcssbootstrap-4carousel

Answer №1

Following extensive research, I have finally discovered the root cause of the error. It appears that in the latest updates, some bootstrap code incorporates the feature prefers-reduced-motion, a CSS media feature designed to determine if the user has requested minimal non-essential motion from the system. By leveraging this feature, the browser is able to adjust animations based on the operating system settings.

If your operating system configuration has reduced animations enabled, certain animations may not be displayed by the browser. To ensure you can view all animations, follow these steps:

OSX: Go to Settings > General > Accessibility > Reduce Motion

IOS: Navigate to System Preferences > Accessibility > Display > Reduce Motion

Windows: Access Settings > Ease of Access > Show animations in Windows > ON

For more information on this issue, refer to this GitHub thread.

Working on Chrome with Windows, I enabled the "show animations in windows" option and everything now functions perfectly. Hopefully, this solution proves helpful to others, and I apologize if it seemed like a minor issue.

Answer №2

Having trouble with slide animation on Bootstrap versions 4.5.2 and 5.1 (https://getbootstrap.com/docs/4.5/components/carousel/)

I was able to resolve the issue by implementing some additional CSS

 <style>
    .carousel-item{
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
    } 
</style>

After adding this CSS snippet, the slide animation started working properly. No need for further explanation, the code speaks for itself.

Answer №3

It is possible that you have selected the (Adjust for best performance) option in the Performance settings on your computer. Best regards :)

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

What is the best way to merge two AngularJS form validation directives criteria using CSS?

When both $dirty and $invalid are true, I would like the input fields to have a red background. However, I am only able to do this one by one, which is not ideal. input.ng-dirty && input.ng-invalid { background-color: red; } ...

htmlcssangularjs

Ensure that items are properly aligned within a container with full width and an overflow:scroll property

I'm facing a bit of a challenge here... I have a container with a max-width setting, and inside that container, I want to have a slider that spans the full width with horizontal scrolling capability. To achieve this, I followed the instructions from ...

htmlcss

Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

I'm currently working on a project using jQuery Mobile (JQM) and jquery.mobile-1.4.5. My goal is to create a responsive side menu panel with a fixed header that works well on both mobile and tablet devices. For the design, I want the panel width to b ...

htmljquerycssjquery-mobileresponsive

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

cssangular

Tips for keeping several buttons in the spotlight: HTML/CSS/JS

Looking for a solution to keep multiple buttons toggled on? I'm not very familiar with JavaScript, but I know that adding a class on click won't work if there's already a class set. Maybe giving the element an ID could be a possible solution ...

javascripthtmlcssbutton

Utilizing Selenium in Python to pinpoint individual elements

I've been struggling to click on this button that appears after selecting an option from a dropdown menu. Here's the button I need to click: https://i.sstatic.net/4Eqkc.png You can find the website link here: The html code snippet: https://i.ss ...

pythonhtmlseleniumxpathcss-selectors

What causes the change in background when I apply CSS to a div element?

Can anyone explain why the background changes when I style the div element? Here is the code I am using. When I remove the CSS related to the div, the background instantly reverts back to its original state. Any insights would be greatly appreciated. Than ...

htmlcssbackground-image

Can cells be divided in a Material UI table?

Is there a way to split a cell in a Material UI table?I am aware that I can create a component to achieve this, but I'm wondering if there is another approach that I may not be aware of. Splitting a cell means having two values separated by a line wit ...

cssreactjsmaterial-ui

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

Flaw in Basic Function Logic Using HTML, JavaScript, and CSS

Need some help with the function onBall3Click1 (code is at the bottom). The ball should act like a lightbulb: ON - turn YELLOW, OFF - turn GRAY. I've been trying to figure out the logic behind it for so long and can't seem to find the issue... ...

javascripthtmlcss

Choosing a specific category to display in a list format with a load more button for easier navigation

Things were supposed to be straightforward, but unexpected behaviors are popping up all over the place! I have a structured list like this XHTML <ul class = "query-list"> <li class="query"> something </li> <li class="query" ...

javascriptjquerycssmeteor

Create a dynamic feature that allows users to easily add text fields within a form in

I'm looking to create a form that adds another input text field automatically when the user fills out one. Here is an example of the HTML structure: <form method="post" action="http://localhost/save" class="save"> <fieldset> <div&g ...

jqueryhtml

unable to apply custom css to primefaces components

In my Java EE application, I am using a ready-made template with CSS and jQuery. All the PrimeFaces components are rendering properly except for the panelGrid control of PrimeFaces 3.2. It is being displayed with a border, but I want it without a border. I ...

javacssjsfprimefaces

CSS - Maximizing One Column's Width While Allocating Percentage Space for Two Columns?

It's been quite some time since I delved into the world of web development and I seem to have forgotten how to tackle this particular issue. Despite hours spent searching online, I've gained knowledge about flex-boxes and other useful tools, but ...

htmlcssflexbox

Issue with vertical navigation bar

Currently working on creating a vertical navigation bar without any styling. It's challenging to figure out how to align the items properly side by side. You can check out the basic functionality at . When clicking on 'Android', I want the g ...

htmlcss

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...

javascripthtmljquerycss

Display the initial three image components on the HTML webpage, then simply click on the "load more" button to reveal the subsequent two elements

I've created a div with the id #myList, which contains 8 sub-divs each with an image. My goal is to initially load the first 3 images and then have the ability to load more when clicking on load more. I attempted to follow this jsfiddle example Bel ...

javascriptjqueryhtmlcss

Using :nth-child on elements with the same class name does not produce the desired result

I attempted to utilize the :nth-child selector to target the first, third, and fifth elements with the class name "personal", but it did not work as expected. Is there an alternative method to specifically select these elements sharing the same class? I ha ...

htmlcss

Emphasize any word starting with an @ symbol to highlight its importance

My goal is to enhance the appearance of words that begin with an "@" symbol by making them bold. For example, transforming the sentence: '@xyzharris has a cat @zynPeter' into: '@xyzHarris has a cat @zynPeter' ...

javascriptcssregex

Tips for abbreviating HTML content using PHP

Similar Question: PHP: Truncate HTML, ignoring tags I have some HTML content stored in a database. I need to display this content in a shortened form. I attempted to use the mb_strstr function like so; $str = mb_strstr($this->htmlData, "</p> ...

phphtml