Carousel slide.bs.Carousel event does not work

Question

$('#carousel').on('slide.bs.carousel', function () {
  alert("SLIDE");
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>

<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="hover" onChange="test()">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
  <div id="carousel" class="carousel-inner">
    <div class="carousel-item active">
      <iframe id="testimony-video" class="youtube-video" type="text/html" height="400px" width="55%" src="https://www.youtube.com/embed/?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=0&controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
    <div class="carousel-item">
      <iframe id="testimony-video" class="youtube-video" type="text/html" height="400px" width="55%" src="https://www.youtube.com/embed/?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=0&controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
    <div class="carousel-item">
      <iframe id="testimony-video" class="youtube-video" type="text/html" height="400px" width="55%" src="https://www.youtube.com/embed/?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=0&controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
  </div>
  <a class="carousel-control-prev carousel-control" href="#carousel" role="button" data-slide="prev" onclick="pauseYouTubeVideo()">
    <span class="carousel-control-prev-icon" aria-hidden="false"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next carousel-control" href="#carousel" role="button" data-slide="next"  onclick="pauseYouTubeVideo()">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Próximo</span>
  </a>  
</div>

But the event is not working, is not called the Alert when the slide is done... Does anyone have any suggestions? Thanks in advance!!!

Answer 1

You are calling 2 versions of jQuery and you are also incorrectly closing one of the script tags.

As follows it will work:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

Guys, I found my problem and I’m sorry!!! As it is the first time I use Jquery did not know the structure, but I found that: INSTEAD:

$('#carousel').on('slide.bs.carousel', function () {
  alert("SLIDE");
})

WHAT IS RIGHT IS IT:

$(document).ready(function() {        
    $('#carousel').on('slide.bs.carousel', function () {
        alert("SLIDE");
    })
});

Thank you very much to those who tried to help! Hug!

Answer 3

Although I have already solved, the solution I found was different:

• I removed the second call from jQuery, leaving only the version 3.3.1;

• I corrected the call from jQuery 3.3.1 that was with the tag closing script missing a <:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">/script>
  

Run the code and see working:

$('#carousel').on('slide.bs.carousel', function () {
  alert("SLIDE");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="hover" onChange="test()">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
  <div id="carousel" class="carousel-inner">
    <div class="carousel-item active">
      <iframe id="testimony-video" class="youtube-video" type="text/html" height="400px" width="55%" src="https://www.youtube.com/embed/?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=0&controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
    <div class="carousel-item">
      <iframe id="testimony-video" class="youtube-video" type="text/html" height="400px" width="55%" src="https://www.youtube.com/embed/?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=0&controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
    <div class="carousel-item">
      <iframe id="testimony-video" class="youtube-video" type="text/html" height="400px" width="55%" src="https://www.youtube.com/embed/?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=0&controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
  </div>
  <a class="carousel-control-prev carousel-control" href="#carousel" role="button" data-slide="prev" onclick="return;">
    <span class="carousel-control-prev-icon" aria-hidden="false"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next carousel-control" href="#carousel" role="button" data-slide="next"  onclick="return;">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Próximo</span>
  </a>  
</div>