Using Animations in a Carousel

Question

I’m doing a service where the customer wants a Carousel that has animations on a video slide when it is visible. The problem is that the code I’ve built only makes the desired animation when the user clicks on one of the arrows in the slide, not when the slide is visible. Also with this my code is having many bugs

JS do Carousel:

  $('.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 I created for animation to occur every time the user goes to slide.

 var drop = 0;

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

Answer 1

creates a setInterval() calling the same function performed when you click the arrow:

function slide(drop){
    if (drop == 1) {
        $("#mega").show(2500);
        drop--;
     } else {
        $("#mega").hide(1000);
        drop++;
    }
}
$(document).ready(function(){
    setInterval(function(){
        slide(drop);
    },1000);//1000 milisegundos, representam 1 segundo
}

So when the page loads, this setInterval() will rotate every 1 second