Captions in Bootstrap Carousel animate diagonally instead of vertically

Question

I have a Bootstrap 5 carousel with three slides, each with two lines of captions. The captions are supposed to move vertically up and down out of frame each time a slide changes. But since they are attached to the slides, which move horizontally, they end up moving out of frame diagonally.

Is there a way to fix this?

I've tried to compensate by moving the captions horizontally in the opposite direction, but that just results in them entering the frame diagonally on the next slide.

const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const SlideClass = ("slide");
var TCarousel = document.querySelector('#TestCarousel');

TCarousel.addEventListener('slide.bs.carousel', function() {
  topcap.forEach(cap => cap.classList.add(SlideClass));
  bottomcap.forEach(cap => cap.classList.add(SlideClass));
});

TCarousel.addEventListener('slid.bs.carousel', function() {
  topcap.forEach(cap => cap.classList.remove(SlideClass));
  bottomcap.forEach(cap => cap.classList.remove(SlideClass));
});

.carousel-inner .carousel-item {
  transition: transform 1s ease;
}

.carousel-caption {
  position: absolute;
  left 0;
  top: 33%;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-size: 4.5vw;
  transition: 1s ease;
}

.caption-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 1;
  transition: 1s ease;
}

.caption-top.slide {
  font-size: 2vw;
  top: -70%;
  opacity: 1;
}

.caption-bottom {
  position: relative;
  top: 15%;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 1;
  transition: 1s ease;
}

.caption-bottom.slide {
  font-size: 2vw;
  top: 140%;
  opacity: 1;
}

@media (min-width: 993px) and (max-width: 1200px) {
  .carousel-inner .carousel-item {
    margin-top: 70px;
  }
}

@media (max-width: 992px) {
  .carousel-inner .carousel-item {
    margin-top: 52px;
  }
}

@media (max-width: 776px) {
  .carousel-caption {
    font-size: 5vw;
  }
  .caption-top-slide,
  .caption-bottom-slide {
    font-size: 2vw;
  }
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Carousel text anim</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="container-fluid p-0 mb-5" id="carousel">
    <section class="slideshow">
      <div id="TestCarousel" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <span id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</span>
              <span class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</span>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <span class="h1-carousel edit1 mb-5 caption-top">UP TOP</span>
              <span class="h1-carousel mb-5 caption-bottom">DOWN LOW</span>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <span class="h1-carousel edit1 mb-5 caption-top">OVER &#38;</span>
              <span class="h1-carousel mb-5 caption-bottom">UNDER</span>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#TestCarousel" data-bs-slide="prev">
                <span class="carousel-control carousel-control-prev-icon" style="display: none" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
        <button class="carousel-control-next" type="button" data-bs-target="#TestCarousel" data-bs-slide="next">
                <span class="carousel-control carousel-control-next-icon" style="display: none" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

I ran the snippet, and I don't see the problem you mention (I use Firefox). What browser do you use? — padaleiana, Jun 09 '21 at 15:22
Huh, that's odd. I'm in Chrome, but I just tested it in Firefox, and it still has the same problem for me. I've also got it in a Codepen: https://codepen.io/AlexanderSplat/pen/dyvjwEY And I've made a gif and uploaded it to Imgur, if you want to see the effect: https://imgur.com/a/bifjruh. — AlexanderSplat, Jun 09 '21 at 15:49
Oh, now I understand. It's just that as the slides move to one side, the texts also _move with them_, giving the perception that they move diagonally. — padaleiana, Jun 09 '21 at 17:59
Yes, exactly. I need to separate the captions from the images, while still keeping the carousel functionality. I guess I'd need to have two carousels going simultaneously in front of each other. But I don't know how to do that. — AlexanderSplat, Jun 09 '21 at 19:23
I've answered your [original question](https://stackoverflow.com/q/67886230) :) — padaleiana, Jun 21 '21 at 00:07

Captions in Bootstrap Carousel animate diagonally instead of vertically

0 Answers0