カルーセルのJquery関数ループ（フローテキスト）

Question

問題があります。私はそれに多くのイメージとテキストを持つカルーセルを持っています。テキストを反応させるために、私はFlowTextというスクリプトを使用しています。これは、最初のカルーセル画像（アクティブな画像）で完全に機能しますが、動くとすぐには動きません。私はその理由を疑っています...それは一度だけ実行され、あなたがカルーセルを動かすとそれはもはやありません。カルーセルを動かすたびにどのように動作するのか、実際にはどうしたらいいですか？

<div id="imageCarousel3" class="carousel slide" data-interval="2000" 
data-ride="carousel" data-pause="hover" data-wrap="true"> 

<ol class="carousel-indicators"> 
<li data-target="#imageCarousel3" data-slide-to="0" class="active"></li> 
<li data-target="#imageCarousel3" data-slide-to="1"></li> 
<li data-target="#imageCarousel3" data-slide-to="2"></li> 
<li data-target="#imageCarousel3" data-slide-to="3"></li> 
<li data-target="#imageCarousel3" data-slide-to="4"></li> 
<li data-target="#imageCarousel3" data-slide-to="5"></li> 
<li data-target="#imageCarousel3" data-slide-to="6"></li> 
<li data-target="#imageCarousel3" data-slide-to="7"></li> 
<li data-target="#imageCarousel3" data-slide-to="8"></li> 
<li data-target="#imageCarousel3" data-slide-to="9"></li> 
<li data-target="#imageCarousel3" data-slide-to="10"></li> 
<li data-target="#imageCarousel3" data-slide-to="11"></li> 
<li data-target="#imageCarousel3" data-slide-to="12"></li> 
<li data-target="#imageCarousel3" data-slide-to="13"></li> 
<li data-target="#imageCarousel3" data-slide-to="14"></li> 
</ol> 


<div class="carousel-inner" style=" max-width: 946px; overflow: hidden; margin:0 auto;"> 

    <div class="item active" ;"> 
     <img src="/Content/Images/Slide21.jpg" class="img-responsive"> 
     <div id="flowtext1" style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); "> 
      <div class="carousel-caption" style="top:0%; position:absolute;"> 
       <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-FRE</strong></p> 
       <p style="font-family:'Open Sans Light';font-size:1.5em; text-align :center;"><strong>Freight Management Systems</strong></p> 
      </div> 
       <div class="carousel-caption" style="top:30%; left: 10%; position:absolute;"> 
        <ul style="text-align:left; left:0%;"> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>NVOCC</strong><br /><br /></li> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Freight Consolidation</strong><br /><br /></li> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Staff Transparency</strong><br /><br /></li> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>No Missed Billings</strong></li> 
        </ul> 
       </div> 
     </div> 

    </div> 

    <div class="item"> 
     <img src="~/Content/Images/Slide22.jpg" class="img-responsive"> 
     <div id="flowtext1" style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); "> 
      <div class="carousel-caption" style="top:0%; position:absolute;"> 
       <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-HMS</strong></p> 
       <p style="font-family:'Open Sans Light';font-size:1.4em; text-align :center;"><strong>Haulage Management Systems</strong></p> 
      </div> 
      <div class="carousel-caption" style="top:30%; left:10%; position:absolute;"> 
       <ul style="text-align:left;"> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Haulage Movement Optimization & Advanced Electronic Planning</strong><br /><br /></li> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Map Interface and Telemetrics</strong><br /><br /></li> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>e-HR (Driver Payroll Auto-Calc)</strong><br /><br /></li> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Trailer Audit and Control</strong></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

とスクリプトの一部に

@section scripts{ 
    <script src="~/Scripts/jquery.fittext.js"></script> 
    <script src="~/Scripts/flowtype.js"></script> 

    <script type="text/javascript"> 
     $("#flowtext1").flowtype(); 

    </script> 

    <script type="text/javascript"> 
     $("#fittext1").fitText(); 
     $("#fittext2").fitText(1.2); 
     $("#fittext3").fitText(1.1, { minFontSize: '10px', maxFontSize: '75px' }); 
    </script> 


} 

そしてここでは、添付の写真です。最初はうまくいく。 2ndはサイズ変更されません。

First Picture Carousel

Second Picture Carousel

EDIT：示唆されるようにクラスIDから変更。

もう意図したとおりに動作しません。通常のサイズ（デスクトップ）でさえ、今は超小型です。最初のスライドを除いて。

助けが必要ですか？

New Image

New Image second

Answer 1

私は特定のスクリプトをループする方法を見つけました。

<script> 
      $(document).ready(function() { 
       var intervalFunction = setInterval(function() { 
        $(".flowtext1").flowtype(); 
       }, 500); 
      }); 
</script> 

これは、上記のjscriptフロータイプを0.5秒ごとにループします。したがって、新しいスライドにスライドすると、テキストのサイズが変更されます。

Answer 2

問題は、同じIDを持つ2つの要素を持っているということです。 jQuery IDセレクタを使用する - >$("#something")....は、一意であることを前提としているため、そのIDを持つ最初の要素を返します。問題を解決する1つの方法は、idではなくclassを使用することです。

HTML：

<div class="item active" ;"> 
     <img src="/Content/Images/Slide21.jpg" class="img-responsive"> 
     <div class="flowtext" style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); "> 
      <div class="carousel-caption" style="top:0%; position:absolute;"> 
       <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-FRE</strong></p> 
       <p style="font-family:'Open Sans Light';font-size:1.5em; text-align :center;"><strong>Freight Management Systems</strong></p> 
      </div> 
       <div class="carousel-caption" style="top:30%; left: 10%; position:absolute;"> 
        <ul style="text-align:left; left:0%;"> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>NVOCC</strong><br /><br /></li> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Freight Consolidation</strong><br /><br /></li> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Staff Transparency</strong><br /><br /></li> 
         <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>No Missed Billings</strong></li> 
        </ul> 
       </div> 
     </div> 

    </div> 

    <div class="item"> 
     <img src="~/Content/Images/Slide22.jpg" class="img-responsive"> 
     <div class="flowtext" style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); "> 
      <div class="carousel-caption" style="top:0%; position:absolute;"> 
       <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-HMS</strong></p> 
       <p style="font-family:'Open Sans Light';font-size:1.4em; text-align :center;"><strong>Haulage Management Systems</strong></p> 
      </div> 
      <div class="carousel-caption" style="top:30%; left:10%; position:absolute;"> 
       <ul style="text-align:left;"> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Haulage Movement Optimization & Advanced Electronic Planning</strong><br /><br /></li> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Map Interface and Telemetrics</strong><br /><br /></li> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>e-HR (Driver Payroll Auto-Calc)</strong><br /><br /></li> 
        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Trailer Audit and Control</strong></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

JS：

<script type="text/javascript"> 
     $(".flowtext").flowtype(); 
</script>