0

Bootstrap Carousel's documented event (slide.bs.carousel) is not firing when using plain JavaScript while it works fine using JQuery.

Steps to Reproduce:

Using Bootstrap 4.1.1 Version (https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js)

Fails when using plain JavaScript addEventListener

document.getElementById('carousel').addEventListener('slide.bs.carousel', function () {
    console.log('slide fired')
})

Works when using JQuery bindings

$('#carousel').on('slide.bs.carousel', function () {
    console.log('slide fired')
})

Full Code to reproduce Error:

<html>
<head>
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://cdn1.vectorstock.com/i/1000x1000/27/05/destination-flag-icon-flat-style-vector-19372705.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn1.vectorstock.com/i/1000x1000/26/80/flag-icon-flat-style-vector-19372680.jpg" alt="Second slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<script>
    //Does not fire
    document.getElementById('carouselExample').addEventListener('slide.bs.carousel', function () {
        console.log('slide fired')
    })

    //Fires
    $('#carouselExample').on('slide.bs.carousel', function () {
        console.log('slide next clicked')
    })
</script>

</body>
</html>
exwhyz
  • 21
  • 4
  • [When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. Click this comment to find out how to provide what we need to help you.](https://stackoverflow.com/help/mcve). Define *fails* ... because if it works with one, and not the other, then it requires the one that it works with obviously. –  Jul 28 '18 at 15:56
  • It's not a matter of slim/full jQuery version... It's a matter of Bootstrap event binding, which requires jQuery. – Louys Patrice Bessette Jul 28 '18 at 19:44
  • 1
    @feelingunwelcome thanks for cracking the whip I have added the full code to reproduce the probelm – exwhyz Jul 28 '18 at 20:42
  • @LouysPatriceBessette many thanks for the pointer as that made me do some more testing and I have updated my original post to clarify this has nothing to do with jQuery SLIM or FULL – exwhyz Jul 28 '18 at 20:43
  • 1
    Then have a look at the possible duplicate. You **have to** use a jQuery handler for bootstrap events. Plain JS won't work. – Louys Patrice Bessette Jul 28 '18 at 20:44

0 Answers0