ブートストラップ「NEXT」ではスムーズではなく「PREVIOUS」ではスムーズになります

Question

私が助けているウェブサイトのフレームワークとしてブートストラップを使用しています。ウェブサイトのフロントページにカルーセルがあります。奇妙な理由から、左矢印（PREVIOUS）をクリックすると、カルーセルの「スライド」遷移は非常にスムーズです。しかし、右矢印（NEXT）をクリックすると奇妙なことが起きているようです。 オンラインで見ると、ブートストラップファイル（CSSとJS）で試してみました。 何も見つかりませんでした。私はカルーセルのためにブートストラップのウェブサイトからコードを再コピーしようとしました。何が間違っているのか分かりません。

URL：www.acebac.org

ヘルプ？ ：Dここ

Answer 1

は、jQueryのコードです：

var $item = $('.carousel .item'); 
    var $wHeight = $(window).height(); 
    $item.eq(0).addClass('active'); 
    $item.height($wHeight); 
    $item.addClass('full-screen'); 

    $('.carousel img').each(function() { 
     var $src = $(this).attr('src'); 
     var $color = $(this).attr('data-color'); 
     $(this).parent().css({ 
      'background-image' : 'url(' + $src + ')', 
      'background-color' : $color 
     }); 
     $(this).remove(); 
    }); 

    $(window).on('resize', function(){ 
     $wHeight = $(window).height(); 
     $item.height($wHeight); 
    }); 

    $('.carousel').carousel({ 
     interval: 5000, 
     pause: "false" 
    }); 

HTMLコード：

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

      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item"> 
        <img src="img/bg.jpg" data-color="lightblue" alt="First Image"> 
        <div class="carousel-caption"> 
         <h3>First Image</h3> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="img/bg1.jpg" data-color="firebrick" alt="Second Image"> 
        <div class="carousel-caption"> 
         <h3>Second Image</h3> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="img/bg2.jpg" data-color="violet" alt="Third Image"> 
        <div class="carousel-caption"> 
         <h3>Third Image</h3> 
        </div> 
       </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 

参照デモ：あなたは質問にあなたのコードを投稿するならばDemo Carousel Bootstrap