Bootstrap.jsバージョン2.02の使用
Twitter Bootstrapカルーセルを取得しようとしています。誰かが私のサイトにアクセスするとすぐに自動的に循環します。
カルーセルにすぐにサイクリングを開始してほしい。
誰もこれを行う方法を知っていますか?
私のサイトはhotairraccoon.comです
カルーセルを1回クリックした後、5秒程度ごとに循環が始まる様子がわかりますが、カルーセルのコンテンツを表示するためにクリックが必要になるのは望ましくありません。
ありがとう!
注:コメントで述べたように、このソリューションはBootstrap 2.に対して正常に機能します。Bootstrap 3 。
私はあなたと同じ問題があり、それを修正するためにやらなければならなかったのは、カルーセルを初期化した後にcarousel( 'cycle')メソッドを呼び出すことだけでした:
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({
interval: 3000
});
$('.carousel').carousel('cycle');
});
</script>
私はこの質問が古いことを理解していますが、私は今夜自分でそれを理解しようとしてグーグルで行っており、誰も適切に答えていないのを見ました。トップ投票の回答は自動的にカルーセルを開始するのではなく、ボタンが押されたときにのみ循環しますが、これはOPが探していたものではありません。
Bootstrap 3.0では、カルーセルコンテナに 'data-ride'属性を追加することでこれを実現できます。
<div id="my-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
...
</div>
</div>
https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L21
$('.carousel').carousel({
interval: 2000
})
Jquery.jsファイルは、headsタグまたはファイルの最後に配置されるかどうかに関係なく、bootstrap.jsの前にロードする必要があります。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>
これらの解決策のどれもあなたのために働かないなら。これを試して:
$(document).ready(function () {
function playcarousel(){
$('.carousel-control.right').trigger('click');
}
window.setInterval(playcarousel, 4000);
});
Bootstrap 3.0では、カルーセルコンテナに 'data-ride'属性を追加することでこれを実現できます。
bootstrapカルーセルを自動的に循環させるもう1つの方法があります。
つかいます - data-ride="carousel"
属性。 bootstrap=ページがロードされるとすぐにカルーセルのアニメーションを開始するように指示します。
次のようにカルーセルを初期化してみてください。
$('.carousel').carousel().next();
これを整理したかどうかはわかりませんが、私もその問題を抱えていました。カルーセル間隔の設定を次のような関数でラップすることで解決しました。
!function ($) {
$(function() {
$('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);
迅速で汚い解決策は、ドキュメントのボタンをプログラムでクリックすることです。
$(function() {
$(".right.carousel-control").click();
});
ところで:他のスクリプトが$を参照する前にjQueryを必ずロードしてください。今は2つのUncaught ReferenceError: $ is not defined
行101および182で$を呼び出しますが、jqueryは最初に行243でロードされるためです。
これらのエラーをキャッチするには、firebugや開発者ツール(chrome/safari)などのツールを使用することをお勧めします。
編集:あなたはすでに実用的なソリューションを持っていると思いますが、ロードする前にjqueryを使用するため、動作しません。
<div id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img1" class="img-responsive" alt="stuff1" >
</div>
<div class="item">
<img src="img2" class="img-responsive" alt="stuff2" >
</div>
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!--This script should be at the very bottom of the page (footer works for me)-->
<script>
$('#myCarousel').carousel
({
interval: 2000,
})
</script>
ここには間違いなく正しい答えがありますが、コードにエラーを追加することで、ポスターが説明するとおりに正確な動作を再現できることを付け加えました。たとえば、セミコロンまたは終了スクリプトタグを削除すると、カルーセルは自動再生しなくなります。
したがって、最初にすべきことは、javascriptコンソールでエラーを探すことです!
これを試して。
$(document).ready(function ()
{
$('.carousel').carousel({interval:5000,pause:false});
});
これは、この質問に対するJesse Carterの回答に基づいて、私にとっては有効な解決策です。なぜこれが機能するのかわかりませんが、何らかの理由で2つの呼び出しが必要です。1つはドキュメント内にあり、もう1つは外部にあります。それらのいずれかを削除すると、一時停止機能が正常に動作しない、または自動サイクリングなど、何かがうまくいきません。さらに、間隔はdoc.ready内でのみ機能するようです。 javascriptの頭からのコメントは大歓迎です;-)しかし、私はT.B.のこの領域を疑います。完全にバグがないわけではありません!私は少し遅れていることがわかっている2.0.2を使用しています(現在のバージョンは 2.0.4 です)が、この領域に変更はありません
jQuery(document).ready(function () {
jQuery('#myCarousel').carousel(
{
interval:2000
});
});
jQuery('#myCarousel').carousel();
これを修正する正しい方法は、カルーセルの作成中にカルーセルの最初のイメージに「アクティブな」クラスを追加することです。これにより、カルーセルはできるだけ早くサイクリングを開始します。
以下に例を示します。
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>