Bootstrapカルーセルの初期アクティブ項目をランダムで選択する
投稿者: ytyng 8年, 5ヶ月 前
Bootstrap で、ヒーローエリアの大カルーセルを表示する時、初期位置をランダムで変更する方法です。
<div id="hero-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="..." alt="..." />
</div>
<div class="item">
<img src="..." alt="..." />
</div>
このような大カルーセルがあるとして、通常は どれか1つの <div class="item"> を <div class="item active"> にしておくものと思います。
ランダムで active にするには
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
var items = $('.carousel-inner .item');
var index = Math.floor(Math.random() * items.length);
items.eq(index).addClass('active');
});
</script>
こんな感じで、Jquery で1つを選択し、addClass すると良いでしょう。
bootstrap.js の読み込み後でも動作します。賢い。
コメント