CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Can Goktas
Can Goktas

Reputation: 117

Bootstrap carousel disappears sliding left on first image

I have 5 carousels with same markup and 4 of them have the same issue. If you slide left the first item, 'active' class of any 'item' class disappears, so, the carousel itself disappears too. I've been inspecting the problem for 2 days but couldn't handle it.

Basically, the carousel markup is just like this:

<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>

Upvotes: 4

Views: 1903

Answers (3)

Mart Van de Ven
Mart Van de Ven

Reputation: 379

An ugly workaround here it to disable left-direction navigation from the first slide.

First find out what the particular conditions are that separates that event from all other carousel based events. Then conditionally execute e.preventDefault()

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

Ugly, but it prevents the issue from collapsing the slider entirely.

Upvotes: 0

Thor
Thor

Reputation: 291

I guess you got some javascript error somewhere.

When you click right, you set an active class on the new image Div container:

<div class="item active">

When you click left you set active on the title

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

Upvotes: 0

k360
k360

Reputation: 61

You cannot keep this code inside "carousel-inner" div

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

That is making the carousel not sliding

Upvotes: 2

Related Questions