ルーズリーフ

公私におよぶ経験値獲得履歴的ななにか。

Bootstrap4のCarouselが動かない

環境

  • IntelliJ IDEA 2016.2.1
  • Bootstrap v4.0.0-alpha.4 ←IDEAで適当にインポートしたら4だった

症状

結論

Bootstrap3までは'class="item"'だったが、Bootstrap4では'class="carousel-item"'に名前が変わっている。
おかしいおかしいと思いながら bootstrap.js を見たら上記の通りだった。

Bootstrap3 Example

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active"> <!-- こことか -->
        <img src="..." alt="...">
    </div>
    <div class="item"> <!-- こことか -->
        <img src="..." alt="...">
    </div>
</div>

Bootstrap4 Example

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="carousel-item active"> <!-- こことか -->
        <img src="..." alt="...">
    </div>
    <div class="carousel-item"> <!-- こことか -->
        <img src="..." alt="...">
    </div>
</div>

今回の教訓、ソースコードが見れるんだから、ぐぐってばかりじゃなくてソースコードを読まないと。
リハビリだからとのらりくらりやってた自分が悪い。どうもすみませんでした。

*1:ルーセル。画像をスライドショー風にくるくる回してくれるJavaScript