Using Animations in a Carousel

I'm doing a service where the client wants a Carousel that has animations on a video slide when it is visible. The problem is that the code I just created makes the desired animation when the user clicks one of the carousel arrows, not when the slide is visible. Also with this my code is having many bugs

Carousel JS:

  $('.btn-tooltip').tooltip();
$('.label-tooltip').tooltip();
$('.pick-class-label').click(function(){
    var new_class = $(this).attr('new-class');
    var old_class = $('#display-buttons').attr('data-class');
    var display_div = $('#display-buttons');
    if(display_div.length) {
    var display_buttons = display_div.find('.btn');
    display_buttons.removeClass(old_class);
    display_buttons.addClass(new_class);
    display_div.attr('data-class', new_class);
    }
});
$( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500,
    values: [ 75, 300 ],
});
$( "#slider-default" ).slider({
        value: 70,
        orientation: "horizontal",
        range: "min",
        animate: true
});
$('.carousel').carousel({
  interval: 4000000
});
demo.initSharingButtons();

$('video').on('play', function (e) {
$(".carousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
$(".carousel").carousel();
});

HTML:

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="assets/img/1_cchbhv0w-RLQQdRYD1zGHA.jpeg" alt="Awesome Image">
    </div>
    <div class="item">
      <img src="assets/img/caro2.jpg" alt="Awesome Image">
    </div>
    <div class="item HavokVideo img-wrapper">
      <!-- width="1920" height="1080" -->
      <video  autoplay muted width="1920" height="1080" loop>
        <source src="assets/img/video1.mp4" type="video/mp4">
      </video>
      <div class="overlap-text film-img ">
        <h2 id="text-overlaping"><img src="assets/img/film.png" width="600" height="600" id="mega"></h2>
        <h2 id="videot">Essential CG: O Inicio do seu futuro</h2>
      </div>
      <div class="img-overlay col-md-2 btn-fix">
        <a href="essentials.html" class="btn btn-block btn-lg btn-success btn-fill" role="button">Saiba Mais</a>
      </div>

    </div>
    <div class="item">
      <img src="assets/img/zbrush.jpg">
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control megabtn" href="#carousel-example-generic" data-slide="prev">
    <span class="fa fa-angle-left"></span>
  </a>
  <a class="right carousel-control megabtn" href="#carousel-example-generic" data-slide="next">
    <span class="fa fa-angle-right"></span>
  </a>
</div>

Script that I created for the animation to occur every time the user goes to the slide.

 var drop = 0;

  $("#mega").hide();
  $(document).ready(function(){
    $(".megabtn").click(function(){
      if (drop == 1) {
        $("#mega").show(2500);
        drop--;
      } else {
        $("#mega").hide(1000);
        drop++;
      }
    });
  });