jquery-3.1.1.js：3855 Uncaught TypeError：crsl.carousel不是函数

Question

我在Wordpress上。 我有麻烦。 我有一个带有进度条的旋转木马，当进度条达到100％时，旋转木马会前进。不需要指标。

我的脚本适用于本地但不适合生产。

＆＃13;

＆＃13;

<script>
(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>100) {
			      percent=0;
			      crsl.carousel('next');
			  }      
			}
			crsl.carousel({
			    interval: 10000
			}).on('slid.bs.carousel', function () {});var barInterval = setInterval(progressBarCarousel, 30);

    });



</script>

＆＃13;

	/* 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>.item>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;
}

＆＃13;

 <script src="https://code.jquery.com/jquery-3.1.1.js"  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<div class="slider-accueil" id='slider-accueil'>
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<a id="brand-home" href="<?php get_home_url();?>"><img src="<?php echo get_template_directory_uri()?>/img/logo-port-plaisance-la-rochelle.png" alt=""></a>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <?php echo get_the_post_thumbnail(4); ?>
      <div class="carousel-caption">
      		<div class="image-carousel"><img src="<?php echo get_template_directory_uri()?>/img/arriver.png" alt=""></div>
      		<div class="content-anime"><p class="content-carousel"  data-animation="animated slideInUp"><?php echo do_shortcode( get_post_field('post_content', 4) ); ?></p></div>
     		 <hr class="transition-timer-carousel-progress-bar" />     		
     		 <hr class="transition-timer-carousel-progress-bar-fond" />
     		<div class="titre-anime"><h1 class="titre-carousel" data-animation="animated slideInUp"><?php echo get_the_title(4); ?></h1></div>
<div class="bouton-anime"><a href="<?php echo get_permalink(4); ?>"><p class="bouton-carousel"  data-animation="animated slideInUp"><?php  echo __('Toutes nos rubriques') ; ?></p></a></div>
      </div>
    </div>
    <div class="item">
      <?php echo get_the_post_thumbnail(6 ); ?>
      <div class="carousel-caption">
      		<div class="image-carousel"><img src="<?php echo get_template_directory_uri()?>/img/decouvrir.png" alt=""></div>
      		<div class="content-anime"><p class="content-carousel"  data-animation="animated slideInUp"><?php echo do_shortcode( get_post_field('post_content', 6) ); ?></p></div>
     		 <hr class="transition-timer-carousel-progress-bar" />     		 
     		 <hr class="transition-timer-carousel-progress-bar-fond" />
     		<div class="titre-anime"><h1 class="titre-carousel" data-animation="animated slideInUp"><?php echo get_the_title(6); ?></h1></div>
<div class="bouton-anime"><a href="<?php echo get_permalink(6); ?>"><p class="bouton-carousel"  data-animation="animated slideInUp"><?php  echo __('Toutes nos rubriques') ; ?></p></a></div>
      </div>
    </div>
     <div class="item">
      <?php echo get_the_post_thumbnail(8); ?>
      <div class="carousel-caption">   
     		 <div class="image-carousel"><img src="<?php echo get_template_directory_uri()?>/img/sedivertir.png" alt=""></div>   		
      		<div class="content-anime"><p class="content-carousel"  data-animation="animated slideInUp"><?php echo do_shortcode( get_post_field('post_content', 8) ); ?></p></div>
     		 <hr class="transition-timer-carousel-progress-bar" />
     		<hr class="transition-timer-carousel-progress-bar-fond" />
     		<div class="titre-anime"><h1 class="titre-carousel" data-animation="animated slideInUp"><?php echo get_the_title(8); ?></h1></div>
      		<div class="bouton-anime"><a href="<?php echo get_permalink(8); ?>"><p class="bouton-carousel"  data-animation="animated slideInUp"><?php echo __('Toutes nos rubriques') ; ?></p></a></div>
      </div>
    </div>
    <div class="item">
      <?php echo get_the_post_thumbnail(10); ?>
      <div class="carousel-caption">
      		<div class="image-carousel"><img src="<?php echo get_template_directory_uri()?>/img/sinformer.png" alt=""></div>
      		<div class="content-anime"><p class="content-carousel"  data-animation="animated slideInUp"><?php echo do_shortcode( get_post_field('post_content', 10) ); ?></p></div>
     		 <hr class="transition-timer-carousel-progress-bar" />
     		 <hr class="transition-timer-carousel-progress-bar-fond" />
     		<div class="titre-anime"><h1 class="titre-carousel"  data-animation="animated slideInUp"><?php echo get_the_title(10); ?></h1></div>
<div class="bouton-anime"><a href="<?php echo get_permalink(10); ?>"><p class="bouton-carousel"  data-animation="animated slideInUp"><?php  echo __('Toutes nos rubriques') ; ?></p></a></div>
      </div>
    </div>

  </div>

＆＃13;

＆＃13;

＆＃13;

有人为我提供解决方案吗？

（对不起我的英文）