What is the problem with bootstrap 4 carousel?

Question

Bootstrap

ahmzmd.ru
Slides should turn over smoothly, one after another, I understand that the official documentation gives examples with img, not with div. But still, here on this site it is implemented similarly to mine. https://ledel.ru/

<div id="carouselExampleIndicators" class="carousel slide w-100 h-100" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner w-100 h-100">

    <!--Carousel item-->
    <div class="carousel-item active w-100 h-100" style="position: relative; background: url('http://ahmzmd.ru/assets/templates/brezent/img/bgtent.jpg') 50% 50% no-repeat; background-size: cover;">
      <div class="wrap w-100 h-100" style="position: absolute; background-color: rgba(0,0,0,0.7);"></div>
      <div class="wrap h-100 w-100 d-flex align-items-center">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-8 offset-md-2">
              <p class="text-white">Адын</p>
              <button type="button" class="btn btn-outline-primary p-3 text-uppercase font-weight-bold">Primary</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--//Carousel item-->

    <!--Carousel item-->
    <div class="carousel-item w-100 h-100" style="position: relative; background: url('http://ahmzmd.ru/assets/templates/brezent/img/bgtent.jpg') 50% 50% no-repeat; background-size: cover;">
      <div class="wrap w-100 h-100" style="position: absolute; background-color: rgba(0,0,0,0.7);"></div>
      <div class="wrap h-100 w-100 d-flex align-items-center">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-8 offset-md-2">
              <p class="text-white">Адын</p>
              <button type="button" class="btn btn-outline-primary p-3 text-uppercase font-weight-bold">Primary</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--//Carousel item-->

    <!--Carousel item-->
    <div class="carousel-item w-100 h-100" style="position: relative; background: url('http://ahmzmd.ru/assets/templates/brezent/img/bgtent.jpg') 50% 50% no-repeat; background-size: cover;">
      <div class="wrap w-100 h-100" style="position: absolute; background-color: rgba(0,0,0,0.7);"></div>
      <div class="wrap h-100 w-100 d-flex align-items-center">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-8 offset-md-2">
              <p class="text-white">Адын</p>
              <button type="button" class="btn btn-outline-primary p-3 text-uppercase font-weight-bold">Primary</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--//Carousel item-->




  </div>
  <a class="cc-but carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="cc-but carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

How to make smooth scrolling?

Answer 1

bootstrap is not a solution for everything, it's just a backbone
to change the effect you need to twist the css
but in general I would recommend the slick plugin, everything is easier there

Answer 2

bootstrap.css - put the .carousel-item class after the "@media (prefers-reduced-motion:reduce) {
.carousel-item {
transition: none
}
}" class