title: jquery-3.1.1.js:3855 Uncaught TypeError: crsl.carousel is not a function
body: <p>I'm on Wordpress.
  I have troubles. 
  I have a carousel with a progress bar, when the progress bar come to 100%, the carousel go forward. No need indicators.</p>
  
  <p>My script work on local but don't work on prod. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  (function( $ ) {
  
   //Function to animate slider captions 
   function doAnimations( elems ) {
    //Cache the animationend event in a variable
    var animEndEv = 'webkitAnimationEnd animationend';
    
    elems.each(function () {
     var $this = $(this),
      $animationType = $this.data('animation');
     $this.addClass($animationType).one(animEndEv, function () {
      $this.removeClass($animationType);
     });
    });
   }
   
   //Variables on page load 
   var $myCarousel = $('#carousel-example-generic'),
    $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
    
  
   //Animate captions in first slide on page load 
   doAnimations($firstAnimatingElems);
  
   
   //Other slides to be animated on carousel slide event 
   $myCarousel.on('slide.bs.carousel', function (e) {
    var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
    doAnimations($animatingElems);
   });  
   
  })(jQuery);
  
  $(document).ready(function(){
        var percent = 0, bar = $('.transition-timer-carousel-progress-bar'), crsl = $('#carousel-example-generic');
     function progressBarCarousel() {
       bar.css({width:percent+'%'});
      percent = percent +0.4;
       if (percent&gt;100) {
           percent=0;
           crsl.carousel('next');
       }      
     }
     crsl.carousel({
         interval: 10000
     }).on('slid.bs.carousel', function () {});var barInterval = setInterval(progressBarCarousel, 30);
  
      });
  
  
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> /* SLIDER */
  div#quatre-reference {
      position: absolute;
      top: -62px;
      right: 0;
  }
  #page-accueil.container-fluid {
   padding: 0;
  }
  div#slider-accueil {
      z-index: 0;
      margin-top: -20px;
  }
  .carousel-caption {
      top: 136px;
   font-size: 26px;
      font-family: 'CaviarDreamsBold', Arial, sans-serif;
  }
  h1.titre-carousel {
   text-transform: uppercase;
   color: white;
   font-size: 84px;
      font-family: 'CaviarDreamsBold', Arial, sans-serif;
  }
  h1.titre-carousel:after {
   content: none;
  }
  .carousel-caption .titre-carousel {
   -webkit-animation-delay: 2s;
   animation-delay: 2s;
  }
  .titre-anime {
   height: 96px;
   overflow: hidden;
   margin-bottom: 40px;
  }
  .carousel-caption .content-carousel {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
   font-size: 18px;
  }
  .content-anime {
   height: 20px;
   overflow: hidden;
  }
  .content-anime p { 
   font-family: 'CaviarDreamsBold', Arial, sans-serif;
  }
  .carousel-caption .bouton-carousel {
   -webkit-animation-delay: 3s;
   animation-delay: 3s;
    color: white;
      font-family: 'CaviarDreamsBold', Arial, sans-serif;
  border: 2px solid white;
  width: 225px;
  margin: auto;
  padding-top:5px;
  padding-bottom: 5px;
  }
  .bouton-anime {
   height: 34px;
   overflow: hidden;
  }
  .image-carousel {
   margin-top: -25px;
   margin-bottom: 25px;
  }
  .transition-timer-carousel-progress-bar {
      height: 1px;
      background-color: #19447f;
      width: 0%;
      margin: 30px 0 20px 0;
      border: none;
      z-index: 11;
      position: relative;
  }
  .transition-timer-carousel-progress-bar-fond {
      height: 1px;
      background-color: #ffffff;
      width: 100%;
      margin: -21px 0 20px 0;
      border: none;
      z-index: 10;
      position: relative;
  }
  .bouton-anime a:hover {
   text-decoration: none;
  }
  #block-mini-menu-carousel li {
   display: inline-block;
   width: 19%;
   text-align: center;
   background: #ffffff;
   padding: 30px;
  }
  #block-mini-menu-carousel li a {
   color: black;
   font-family: 'CaviarDreamsBold', Arial, sans-serif;
   font-size: 14px;
  }
  #block-mini-menu-carousel.container {
      position: relative;
      top: -200px;
      background: #ffffff;
      padding:0;
  }
  #block-mini-menu-carousel .nav-menu {
      margin-bottom: 0; 
      padding: 0;
  }
  #block-mini-menu-carousel li#menu-item-268 a {
      padding: 0;
    animation: mouvementFleche 1s ease infinite;
    position: relative;
    top: 0;
  }
  .carousel-caption {
   text-shadow: none;
  }
  
  @keyframes mouvementFleche {
    0 {
      top: -5px;
    }
    50% {
      top: 5px;
    }
    100% {
      top: -5px;
    }
  }
  @media (max-width: 767px) {
   #block-mini-menu-carousel.container {
    background: transparent;
    margin-bottom: 75px;
    top: -244px;
   }
   li#menu-item-268 {
    background: transparent;
       position: absolute;
       top: 115px;
       right: calc(50vw - 23%);
       width: 40px;
   }
   #block-mini-menu-carousel li {
       padding: 10px 0;
       width: 47%;
       margin-bottom: 5px;
       margin-right: 5px;
   }
   #block-mini-menu-carousel.container {
       display: block;
   }
   ul#block-mini-menu-carousel {
       padding: 15px 0 0 0;
   }
   .carousel-caption {
    top: 25px;
   }
   h1.titre-carousel {
    font-size: 38px;
   }
   div.titre-anime {
    height: 55px;
   }
  
  }
  .carousel-inner&gt;.item&gt;img {
   min-width: 100%;
   height: calc(100vh - 50px);
   min-height: 590px;
  }
  .article-grand .voir-article {
       position: absolute;
      top: 170px;
      left: 0;
  }
  .info-actu-sidebar.text-center {
      height: 101px;
      background: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://code.jquery.com/jquery-3.1.1.js"  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div class="slider-accueil" id='slider-accueil'&gt;
   &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
  &lt;a id="brand-home" href="&lt;?php get_home_url();?&gt;"&gt;&lt;img src="&lt;?php echo get_template_directory_uri()?&gt;/img/logo-port-plaisance-la-rochelle.png" alt=""&gt;&lt;/a&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;?php echo get_the_post_thumbnail(4); ?&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;div class="image-carousel"&gt;&lt;img src="&lt;?php echo get_template_directory_uri()?&gt;/img/arriver.png" alt=""&gt;&lt;/div&gt;
          &lt;div class="content-anime"&gt;&lt;p class="content-carousel"  data-animation="animated slideInUp"&gt;&lt;?php echo do_shortcode( get_post_field('post_content', 4) ); ?&gt;&lt;/p&gt;&lt;/div&gt;
          &lt;hr class="transition-timer-carousel-progress-bar" /&gt;       
          &lt;hr class="transition-timer-carousel-progress-bar-fond" /&gt;
         &lt;div class="titre-anime"&gt;&lt;h1 class="titre-carousel" data-animation="animated slideInUp"&gt;&lt;?php echo get_the_title(4); ?&gt;&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="bouton-anime"&gt;&lt;a href="&lt;?php echo get_permalink(4); ?&gt;"&gt;&lt;p class="bouton-carousel"  data-animation="animated slideInUp"&gt;&lt;?php  echo __('Toutes nos rubriques') ; ?&gt;&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;?php echo get_the_post_thumbnail(6 ); ?&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;div class="image-carousel"&gt;&lt;img src="&lt;?php echo get_template_directory_uri()?&gt;/img/decouvrir.png" alt=""&gt;&lt;/div&gt;
          &lt;div class="content-anime"&gt;&lt;p class="content-carousel"  data-animation="animated slideInUp"&gt;&lt;?php echo do_shortcode( get_post_field('post_content', 6) ); ?&gt;&lt;/p&gt;&lt;/div&gt;
          &lt;hr class="transition-timer-carousel-progress-bar" /&gt;        
          &lt;hr class="transition-timer-carousel-progress-bar-fond" /&gt;
         &lt;div class="titre-anime"&gt;&lt;h1 class="titre-carousel" data-animation="animated slideInUp"&gt;&lt;?php echo get_the_title(6); ?&gt;&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="bouton-anime"&gt;&lt;a href="&lt;?php echo get_permalink(6); ?&gt;"&gt;&lt;p class="bouton-carousel"  data-animation="animated slideInUp"&gt;&lt;?php  echo __('Toutes nos rubriques') ; ?&gt;&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
       &lt;div class="item"&gt;
        &lt;?php echo get_the_post_thumbnail(8); ?&gt;
        &lt;div class="carousel-caption"&gt;   
          &lt;div class="image-carousel"&gt;&lt;img src="&lt;?php echo get_template_directory_uri()?&gt;/img/sedivertir.png" alt=""&gt;&lt;/div&gt;     
          &lt;div class="content-anime"&gt;&lt;p class="content-carousel"  data-animation="animated slideInUp"&gt;&lt;?php echo do_shortcode( get_post_field('post_content', 8) ); ?&gt;&lt;/p&gt;&lt;/div&gt;
          &lt;hr class="transition-timer-carousel-progress-bar" /&gt;
         &lt;hr class="transition-timer-carousel-progress-bar-fond" /&gt;
         &lt;div class="titre-anime"&gt;&lt;h1 class="titre-carousel" data-animation="animated slideInUp"&gt;&lt;?php echo get_the_title(8); ?&gt;&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="bouton-anime"&gt;&lt;a href="&lt;?php echo get_permalink(8); ?&gt;"&gt;&lt;p class="bouton-carousel"  data-animation="animated slideInUp"&gt;&lt;?php echo __('Toutes nos rubriques') ; ?&gt;&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;?php echo get_the_post_thumbnail(10); ?&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;div class="image-carousel"&gt;&lt;img src="&lt;?php echo get_template_directory_uri()?&gt;/img/sinformer.png" alt=""&gt;&lt;/div&gt;
          &lt;div class="content-anime"&gt;&lt;p class="content-carousel"  data-animation="animated slideInUp"&gt;&lt;?php echo do_shortcode( get_post_field('post_content', 10) ); ?&gt;&lt;/p&gt;&lt;/div&gt;
          &lt;hr class="transition-timer-carousel-progress-bar" /&gt;
          &lt;hr class="transition-timer-carousel-progress-bar-fond" /&gt;
         &lt;div class="titre-anime"&gt;&lt;h1 class="titre-carousel"  data-animation="animated slideInUp"&gt;&lt;?php echo get_the_title(10); ?&gt;&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="bouton-anime"&gt;&lt;a href="&lt;?php echo get_permalink(10); ?&gt;"&gt;&lt;p class="bouton-carousel"  data-animation="animated slideInUp"&gt;&lt;?php  echo __('Toutes nos rubriques') ; ?&gt;&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Someone have a solution for me ? </p>
  
  <p>(sorry for my english)</p>