3

ページ内の私の Web サイトには、2 つの異なるブートストラップ カルーセルがあります。それぞれに独自の遷移速度が必要です。長い間試した後、javascriptを介して方法を見つけました

document.getElementById("image1").style.cssText="position: relative;-webkit-transition: 5s ease-in-out left;-moz-transition: 5s ease-in-out left;-o-transition: 5s ease-in-out left;transition: 5s ease-in-out left;";

html用

<div id="carouseltheme" class="carousel slide">
   <div class="carousel-inner" style="height:280px;margin-left:0em;">
       <div id="image1" class=" active item">
          <div class="row-fluid">
              <div class="span12" style="margin-top:1em;margin-left:5.5em">
                "inner-carousel"
              </div>
          </div>                   
       </div>
       <div id="image1" class="item">
          <div class="row-fluid">
              <div class="span12" style="margin-top:1em;margin-left:5.5em">
                  "inner-carousel"                
              </div>
          </div>
       </div>
    </div>
 </div>

トランジション速度は低下しましたが、スライドは一貫していません。私を助けてください...

4

1 に答える 1

0

非常に簡単です。カルーセルを必要な数だけ追加し、IDがそれぞれで一意であることを確認します。次に、jQueryを使用して、それぞれの間隔を設定します。独立したIDを使用すると、必要に応じてそれぞれにCSSを適用することもできます。

$('#carouseltheme').carousel({
    interval: 600
})
$('#carouseltheme2').carousel({
    interval: 1500
})
$('#carouseltheme3').carousel({
    interval: 2000
})
于 2013-03-14T22:25:14.650 に答える