Bootstrap carousel disappears, sliding to the left in the first image

Question

I have 5 carousels with the same layout, and 4 of them have the same problem. If you let go of the first element, the "active" class of the "item" class will disappear, so the carousel itself will also disappear. I checked the problem for 2 days, but could not handle it.

In principle, the carousel markup is as follows:

<div id="project-gallery-carousel-4" class="carousel slide gallery-carousel" data-ride="carousel" data-interval="false">

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner">

                    <a href="javascript:void(0)" class="project-close-btn"></a>
                    <span class="project-name-box">ERENKÖY APARTMANI</span>

                    <div class="item active">
                      <img src="images/certum/001.jpg">
                      <div class="carousel-caption">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, numquam, quia, eaque, soluta cum totam suscipit voluptatem possimus esse corporis ad odit accusantium minima enim sequi officiis tenetur tempore dignissimos.</p>
                      </div>
                    </div>

                    <div class="item">
                      <img src="images/certum/002.jpg">
                      <div class="carousel-caption">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, libero accusamus alias nemo voluptas quas dicta minus omnis architecto. Et, ab inventore assumenda doloremque corrupti libero placeat facere eaque in.</p>
                      </div>
                    </div>

                    <div class="item">
                      <img src="images/certum/003.jpg">
                      <div class="carousel-caption">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, libero accusamus alias nemo voluptas quas dicta minus omnis architecto. Et, ab inventore assumenda doloremque corrupti libero placeat facere eaque in.</p>
                      </div>
                    </div>

                  </div>

                  <!-- Controls -->
                  <a class="left carousel-control" href="#project-gallery-carousel-4" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                  <a class="right carousel-control" href="#project-gallery-carousel-4" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

                  <a href="#" class="project-close-bar dn">KAPAT</a>

                </div>

Answer 1

You cannot save this code inside the "carousel-inner" div

 <a href="javascript:void(0)" class="project-close-btn"></a>
 <span class="project-name-box">ERENKÖY APARTMANI</span>

This makes the carousel non-slip.

Answer 2

I assume you have a javascript error somewhere.

Div Div :

<div class="item active">

,

<span class="project-name-box active">DRS YAPI <br> OFİSİ</span>

Answer 3

An ugly workaround is here to disconnect left-side navigation from the first slide.

First, find out what are the special conditions that separate this event from all other carousel-based events. Then conditionally executee.preventDefault()

$('#carousel').on('slide.bs.carousel', function (e) {
  if (e.type == "slide" && e.direction == "right" && e.relatedTarget.className != "item"){
    return e.preventDefault();
  }
})

Terrible, but this prevents the problem from completely minimizing the slider.