Как остановить изображения слайдера Bootstrap 4 из движущегося положения на слайде, когда прикрепление фона: исправлено? (Эффект параллакса)

Question

Я пытаюсь добавить эффект прокрутки параллакса к ползунку Bootstrap 4. Однако, когда ползунок переключается на следующее изображение, изображение должно сдвинуться на место после того, как оно было изменено. Как я могу предотвратить это?

.customOverlayText {
  position: absolute;
  color: white;
  z-index: 2;
  left: 0;
  right: 0;
}

.carousel-inner .carousel-item {
  height: 500px;
  background-size: cover;
  background-position: center center;
  background-color: black;
  background-attachment: fixed;
}

.general {
  background-color: #f0f0f0;
  padding-left: 200px;
  padding-right: 200px;
  padding-top: 50px;
  padding-bottom: 50px;
}

@media only screen and (max-width: 1146px) {
  .general {
    padding-left: 50px;
    padding-right: 50px;
  }
}

<div class="carousel slide" data-pause="false" data-ride="carousel">
  <div class="customOverlayText d-flex h-100 align-items-center justify-content-center">
    <center>Overlay</center>
  </div>
  <div class="carousel-inner text-center">
    <div class="carousel-item active" style="background-image:url(http://coopertimewell.com/testing/images/slider/1.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/2.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/3.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/4.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/5.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/6.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/7.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/8.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/9.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/10.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/11.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/12.jpg);"></div>
  </div>
</div>
<center>
  <div class="general" id="redGeneral">
    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Dolor sit amet consectetur adipiscing elit pellentesque habitant
      morbi tristique. Nisl pretium fusce id velit ut tortor pretium viverra. Velit dignissim sodales ut eu sem integer vitae justo eget. Scelerisque viverra mauris in aliquam sem. Nunc consequat interdum varius sit amet. Fames ac turpis egestas sed tempus
      urna. At volutpat diam ut venenatis tellus in metus. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Eget mauris pharetra et ultrices neque ornare. Id aliquet risus feugiat in ante metus dictum. Accumsan in nisl nisi
      scelerisque eu ultrices vitae auctor eu. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Consectetur lorem donec massa sapien faucibus et. Mauris pharetra et ultrices neque ornare aenean. Amet nisl purus in mollis nunc sed id.</h2>
  </div>

Кроме того, могу ли я добавить наложение текста на эффект прокрутки Parallax?

Answer 1

Для эффекта параллакса обычно требуется как минимум два слоя, движущихся с разными скоростями. Я не думаю, что карусель BS предназначена для этого. Также изображения обычно добавляются с

<img src="">

атрибут, а не использование фонового изображения для поддержания отношения перспективы. Если вы хотите продолжить с тем эффектом, которого пытаетесь достичь, можете ли вы добавить какое-нибудь пояснение к изображению или пример, который вы видели? Я думаю, что это будет трудно с использованием структуры BS (много переопределений). https://getbootstrap.com/docs/4.0/components/carousel/ С вашим вопросом вы могли бы добавить полный пример кода с вашим вопросом? Отредактируйте его, затем используйте значок (<>).