Bootstrap 4 Carousel doesn't advance after the first Next / Previous arrow click

Question

My carousel isn't working properly after the page first loads. Once it does and I click on one of the next / previous arrow a second time, the carousel won't advance. I do notice the carousel ID loads in the URL after the first click and if I reload the page at that point, the carousel will work fine with advancing properly on each click once that #pitchdeck carousel ID is in the URL.

Any ideas on why this is happening? Please note I did a little CSS styling with the indicators, arrows and caption for custom positioning so I'm not sure if that's playing into this. Link below (carousel slightly down the page). Thanks in advance on any help provided! Link and code below...

https://www.bhisciences.com/

<div class="container">
        <div class="row">
            <div id="pitchdeck" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators hidden">
                <li data-target="#pitchdeck" data-slide-to="0" class="active"></li>
                <li data-target="#pitchdeck" data-slide-to="1"></li>
                <li data-target="#pitchdeck" data-slide-to="2"></li>
                <li data-target="#pitchdeck" data-slide-to="3"></li>
                <li data-target="#pitchdeck" data-slide-to="4"></li>
                <li data-target="#pitchdeck" data-slide-to="5"></li>
                <li data-target="#pitchdeck" data-slide-to="6"></li>
              </ol>
              <div class="carousel-inner">

                <div class="carousel-item active">
                  <img class="d-block w-100" src="images/deck-stroke.jpg" alt="Stroke">
                  <div class="carousel-caption">
                      <h3><b>Stroke.</b></h3> 
                        Nearly 800,000 people suffer from a stroke each year, making it the leading cause of serious, long-term disability in the U.S.
                  </div>
                </div>
                <div class="carousel-item"> 
                  <img class="d-block w-100" src="images/deck-alz.jpg" alt="Alzheimer's">
                  <div class="carousel-caption">
                      <h3><b>Alzheimer's Disease.</b></h3> 
                      An estimated 5.5 million Americans of all ages suffer from Alzheimer's Disease and related dementias.
                  </div>
                </div>
                <div class="carousel-item"> 
                  <img class="d-block w-100" src="images/deck-diabetes.jpg" alt="Diabetes">
                  <div class="carousel-caption">
                      <h3><b>Diabetes.</b> </h3> 
                      29 million people in the U.S. have diabetes and another estimated 8.1 million are undiagnosed, living unaware of their condition.
                  </div>
                </div>
                <div class="carousel-item"> 
                  <img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-heart.jpg" alt="Heart Disease">
                  <div class="carousel-caption">
                      <h3><b>Heart Disease.</b> </h3> 
                      610,000 people, or one in four, die each year from heart disease in the U.S., making it the leading cause of death for Americans.
                  </div>
                </div>
                <div class="carousel-item"> 
                  <img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-arthritis.jpg" alt="Arthritis">
                  <div class="carousel-caption">
                      <h3><b>Arthritis.</b> </h3> 
                      This chronic, debilitating condition afflicts 350 million people worldwide, and 40 million people in the U.S. alone.
                  </div>
                </div>
                <div class="carousel-item"> 
                  <img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-infertility.jpg" alt="Infertility and Erectile Dysfunction">
                  <div class="carousel-caption">
                      <h3><b>Infertility and Erectile Dysfunction.</b> </h3> 
                      Infertility impacts 5 million people, or one in every 10 couples, in the U.S. As many as 52 percent of men suffer from erectile dysfunction.
                  </div>
                </div>
                <div class="carousel-item"> 
                  <img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-chronic.jpg" alt="Chronic Traumatic Encephalopathy">
                  <div class="carousel-caption">
                      <h3><b>Chronic Traumatic Encephalopathy.</b> </h3> 
                      This neurodegenerative disease is found in people with multiple head injuries and afflicts NFL players, a story depicted in the feature film "Concussion" starring Will Smith. NFL players have committed suicide as a result of this disease and the NFL has set aside nearly $800 million to treat the disease.
                  </div>
                </div>

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

Would you mind create a snippet here with the isolated carousel? — dferenc, Dec 16 '17 at 01:12
Hi Dferenc, I just edited my initial post including the code. Thanks! — Mawkus, Dec 18 '17 at 16:08

score 1 · Accepted Answer · answered Dec 18 '17 at 17:48

Your carousel markup is correct and it seems that the phenomenon has nothing to do with that. In fact, the standalone example does not produces the error, so I started to check the live site looking for other javascripts that could interfere with this functionality.

Apparently you have a line in an inline script that reads as follows.

var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');

The a[href*="#"]:not([data-easing]) selector selects the carousel controls as well. If you comment out that single line, the carousel start to works as expected. So, it is the SmoothScroll javascript that most probably stops the propagation of the click event, or interferes with that click in an other way.

I'm not familiar with SmoothScroll but an easy fix would be to change the selector not to match the carousel controls.

Thank you sir. I added the "nav-link" class to the link selector and that seemed to work based on this other Stack Overflow thread. [StackOverflow](https://stackoverflow.com/questions/40197906/smooth-scrolling-anchors-affecting-bootstrap-carousel-arrows). `var scroll = new SmoothScroll('nav-link.a[href*="#"]:not([data-easing])');` — Mawkus, Dec 18 '17 at 20:27

score 0 · Answer 2 · answered Dec 19 '17 at 08:14

<div id="myCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/1.jpg" alt="image1" style="width:100%;">
                        <div class="carousel-caption">
                            <h1>MARKETING</h1>
                            <h3>LA is always so much fun!</h3>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/2.jpg" alt="Chicago" style="width:100%;">
                        <div class="carousel-caption">
                            <h1>Los Angeles</h1>
                            <h3>LA is always so much fun!</h3>
                        </div>
                    </div>

                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

Bootstrap 4 Carousel doesn't advance after the first Next / Previous arrow click

2 Answers2