web-dev-qa-db-ja.com

Bootstrap 3カルーセル遷移速度

問題が発生しています。

私は次のことを試みました：

.carousel-inner > .item {
 position: relative;
 display: none;
 -webkit-transition: 0.6s ease-in-out left;
 -moz-transition: 0.6s ease-in-out left;
 -o-transition: 0.6s ease-in-out left;
 transition: 0.6s ease-in-out left;
}


In the bootstrap.js:

.emulateTransitionEnd(600)

しかし、それは適切に機能していないようです。アニメーションがスピードアップします。しかし、私はテキストを含むカルーセルキャプションを使用しています。正しくスライドしますが、.content-captionは左端まで移動し、消えて、通常の位置に表示されます。

変更する必要がある他の変数はありますか？

csstwitter-bootstrapcarousel
8
user1185135

訪問： http://getbootstrap.com/javascript/#carousel

Htmlファイルの最後に以下を追加して、遷移速度を設定します。10000（10秒）

 <script src="../../dist/js/bootstrap.min.js"></script>  
 <script>
  $('.carousel').carousel({
   interval: 10000
  });
 </script>
11
jbiWeisendorf

これが非常に簡単な方法です。

追加 "data-interval="2000"をHTMLで使用します。例えば：<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

8
Ajeesh Joseph

移行時間ではなく実際のスライド速度を変更するために、LESSを使用しているため、これを私のcustom.lessに追加しました（他のすべてのbootstrap LESSファイルを最初にインポートします）が機能しました）。

@slideSpeed: 2s
.carousel-inner {
    > .item {
        .transition(@slideSpeed ease-in-out left);
        @media all and (transform-3d), (-webkit-transform-3d) {
            transition: transform @slideSpeed ease-in-out;
        }
    }
}

うまくいけば、これが@ToolmakerSteveのような人や将来の私自身を助けるでしょう。

Bootstrap.jsにも定数があり、これもオプションに変更する必要がありました（以下の「期間」を参照）

  Carousel.DEFAULTS = {
  interval: 5000,
  pause: 'hover',
  wrap: true,
  keyboard: true,
  duration: 600
}

そして置き換えます：

    //.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
    .emulateTransitionEnd(this.options.duration)

次に、data-duration = "1000"をマークアップに追加できます。

3
Randy Slavey

これは私にとってBootstrap 4.1

#MyCarousel .carousel-item { transition: transform 1s ease-in-out; }

1を任意の期間に変更します。カルーセルにIDを使用すると、Bootstrapが自動的にオーバーライドされ、カルーセルごとに異なる速度を使用できるようになります。

0
ratnadhatamam

bootstrap 4 scssを使用している人はこの変数を使用できます:)

$carousel-transition:           transform .6s ease-in-out !default;
0
Robbie McFarlane