Bootstrapカルーセルの初期アクティブ項目をランダムで選択する

(Comments)

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 の読み込み後でも動作します。賢い。

Current rating: 2

Comments

Recent Tweets

  • ytyng

    ytyng @ytyng

    apple developer の、テスト用デバイスのUDIDを1年ごとにチェックして、古い端末を消しちゃうやつ チェックボックスを入れたのを残すのか、消すのかの判断まちがって、全部のUDID消えたわ
    2 months, 2 weeks ago

  • ytyng

    ytyng @ytyng

    うちの会社 TORICO の 代表が今TV出てます #漫画全巻ドットコム #激レアさんを連れてきた
    2 months, 3 weeks ago

  • ytyng

    ytyng @ytyng

    Proofpoint にブロックされているIPアドレスからでも icloud など Apple メールアドレスにメール送信されてもブロックされてない…?
    3 months, 2 weeks ago

Recent Posts

Archive

2020
2019
2018
2017
2016
2015
2014
2013
2012
2011

Categories

Authors

Feeds

RSS / Atom