2017-11-06 6 views
0

私は3つのイメージを持つカルーセルを持ち、左側にテキストのセクションがあります。 enter image description here 各画像の左のテキストが変更されます(スムーズな移行が望ましい)。カルーセルのデータ間隔をfalseに設定して、ユーザーが画像をクリックするとテキストが変更されるようにします。カルーセル内の次/前の画像。私はこれをやって行くのか本当にわからないんだけど、ここでは、このセクション全体のために私のコードです:カルーセルスライドを変更すると、カルーセルの外側のブートストラップの変更要素

<div id="sport" class="sportInfo"> 

     <div class="row"> 

      <div class="col-sm-4"> 
       <div class="sportLabel"> 
        SPORT 
       </div> 
       <div class="sportText"> 
        Long paragraph of text that you see on the left 
       </div>  
      </div>  

      <div class="col-sm-8"> 
       <div class="sportCarousel"> 

        <!-- CAROUSEL ==============================================--> 
        <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false"> 

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

         <!-- Wrapper for slides --> 
         <div class="carousel-inner" role="listbox"> 
          <div class="item active"> 
           <img src="Resources/Images/img1.png" alt="img1"> 
          </div> 
          <div class="item"> 
           <img src="Resources/Images/img2.jpg" alt="img2"> 
          </div> 
          <div class="item"> 
           <img src="Resources/Images/img3.png" alt="img3"> 
          </div> 
         </div> 

         <!-- Left and right controls --> 
         <a class="left carousel-control" href="#myCarousel1" 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="#myCarousel1" role="button" data-slide="next"> 
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
          <span class="sr-only">Next</span> 
         </a> 

        </div> 
       </div> 

       <!-- END OF CAROUSEL =======================================--> 

      </div>  
     </div> 
    </div> 

は、それが適切でないと思うが、ここでCSSを使用すると、行の参照クラスのためです。私の勘では、私はかなりのだが、私は、それが変更されており、右のテキストは、その特定のスライドのために左側に表示するように摺動する、スライドが変更されたときに検出するために、jQueryの機能をする必要がありますということです

.sportInfo { 
    font-family: ciclefina, sans-serif; 
    background-color: #373737; 
    color: #e2e2e2; 
    text-align: justify; 
} 

.sportLabel{ 
    font-family: ciclegordita, sans-serif; 
    font-size: 300%; 
    color: #b1b1b1; 
    text-align: center; 
    padding: 30px 0 0 30px; 
} 

.sportText{ 
    font-family: open_sanslight, sans-serif; 
    font-size: 14px ; 
    color: #e2e2e2; 
    text-align: justify; 
    padding-top: 30px; 
    padding-left: 30px; 
} 

.sportCarousel{ 
    position: relative; 
    padding: 0; 
    top: -50px; 
    height: 100%; 
} 

何か助けていただければ幸いです。

答えて

0

ブートストラップ3が 'slide'イベントを 'slide.bs.carousel'に変更しました。 jQueryを使って、あなたはこれを行うことができます。

$('#myCarousel1').bind('slide.bs.carousel', function (e) { 
 
    alert('slide event!'); 
 
});
#sport{width:100%;} 
 
.sportInfo { 
 
    font-family: ciclefina, sans-serif; 
 
    background-color: #373737; 
 
    color: #e2e2e2; 
 
    text-align: justify; 
 
} 
 

 
.sportLabel{ 
 
    font-family: ciclegordita, sans-serif; 
 
    font-size: 300%; 
 
    color: #b1b1b1; 
 
    text-align: center; 
 
    padding: 30px 0 0 30px; 
 
} 
 

 
.sportText{ 
 
    font-family: open_sanslight, sans-serif; 
 
    font-size: 14px ; 
 
    color: #e2e2e2; 
 
    text-align: justify; 
 
    padding-top: 30px; 
 
    padding-left: 30px; 
 
} 
 

 
.sportCarousel{ 
 
    position: relative; 
 
    padding: 0; 
 
    top: -50px; 
 
    height: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="sport" class="sportInfo"> 
 

 
     <div class="row"> 
 

 
      <div class="col-sm-4"> 
 
       <div class="sportLabel"> 
 
        SPORT 
 
       </div> 
 
       <div class="sportText"> 
 
        Long paragraph of text that you see on the left 
 
       </div>  
 
      </div>  
 

 
      <div class="col-sm-8"> 
 
       <div class="sportCarousel"> 
 

 
        <!-- CAROUSEL ==============================================--> 
 
        <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false"> 
 

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

 
         <!-- Wrapper for slides --> 
 
         <div class="carousel-inner" role="listbox"> 
 
          <div class="item active"> 
 
           <img src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg" alt="img1"> 
 
          </div> 
 
          <div class="item"> 
 
           <img src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg" alt="img2"> 
 
          </div> 
 
          <div class="item"> 
 
           <img src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg" alt="img3"> 
 
          </div> 
 
         </div> 
 

 
         <!-- Left and right controls --> 
 
         <a class="left carousel-control" href="#myCarousel1" 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="#myCarousel1" role="button" data-slide="next"> 
 
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
          <span class="sr-only">Next</span> 
 
         </a> 
 

 
        </div> 
 
       </div> 
 

 
       <!-- END OF CAROUSEL =======================================--> 
 

 
      </div>  
 
     </div> 
 
    </div>

関連する問題