Carousel sliding animation not working on Bootstrap 4.5.2

user_14253693 0
Viewed 1903

I'm in the process of learning Bootstrap (v4.5.2), and wanted to create a simple carousel that slides automatically for my website. I went to Bootstrap documentation and copied the example code for a carousel with slides only (https://getbootstrap.com/docs/4.5/components/carousel/), and added some color and height to the divs to see if it was working. Here is 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/popper.js@1.16.1/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>

As you can see, everything works fine except the sliding animation. If instead of v4.5.2 I use v4.0.0 of bootstrap (with the exact same code) it 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/popper.js@1.16.1/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>

But I would like to use the latest version of the framework if possible. I have noticed that even in the documentation pages, in v4.0.0 sliding animation works on the example slides (https://getbootstrap.com/docs/4.0/components/carousel/), but not in v4.5.2 (https://getbootstrap.com/docs/4.5/components/carousel/), so I'm guessing this might be a bug from the newer version? Or maybe as I'm a newbie I'm doing something wrong? Thanks in advance for your answers, I hope the question is clear and well written, it's my first time asking somtehing over here.

carousel bootstrap-4 css html
2 Answers

After hours of research I think I just found out what was causing the error. It seems like on the newest updates some bootstrap code has the feature (prefers-reduced-motion), a CSS media feature that is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. By using this feature the browser will check the configuration of your operating system, and wil display the animations accordingly.

So If you have reduced animations on your operating system configuration then the browser will not show some animations, like in this case. To be able to see the animation you must do the following:

OSX: Settings > General > Accessibility > Reduce Motion

IOS: System Preferences > Accessibility > Display > Reduce Motion

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

For more info about this check out this issue on github.

Working from chrome using windows, I turned ON the "show animations in windows" button and everything works perfectly now. Hope this helps guys, and sorry if it was a trivial issue.

user_142536930

Slide Animation issue on Bootstrap v4.5.2 & v5.1 (https://getbootstrap.com/docs/4.5/components/carousel/)

I manage to fix it using additional CSS

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

then the animation slide started working, I don't need to explain reading the code tells everything.

user_83489340
Related