Bootstrap4のCarouselで画像のスライドショーにつくインジケーターが表示されない

チュートリアルを見ながら、Bootstrap4のCarouselで画像のスライドショーを実装したいと思っています。しかし、スライドショーのインジケーターが表示されず、要素の検証をかけるとスライドショーしたい画像の上の部分にある、ということになっているようです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewpoint" content="width=device-width, initial-scale=1">
6    <title>Complete bootstrap 4 website layout</title>
7    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
9    <link rel="stylesheet" href="style.css">
10</head>
11<body> 
12<div id="slides" class="carousel slide" data-ride="carousel">
13        <ol class="carousel-indicators">
14            <li data-target="#slides" data-slide-to="0" class="active"></li>
15            <li data-target="#slides" data-slide-to="1"></li>
16            <li data-target="#slides" data-slide-to="2"></li>
17        </ol>
18    </div>
19    <div class="carousel-inner"role="listbox">
20        <div class="carousel-item active">
21            <img src="img/background.png" alt="">
22            <div class="carousel-caption">
23                <h1 class="display-2">Bootstrap</h1>
24                <h3>Complete Website Layout</h3>
25                <button class="btn btn-outline-light btn-lg" type="button">VIEW DEMO</button>
26                <button class="btn btn-primary btn-lg" type="button">Get started</button>
27            </div>
28        </div>
29        <div class="carousel-item">
30            <img src="img/background2.png" alt="">
31        </div>
32        <div class="carousel-item">
33            <img src="img/background3.png" alt="">
34        </div>
35    </div>
36　　　<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
37     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
38     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
39</body>
40</html>

試したこと

bootstrap4の公式ページにあるcarouselについてを参照し直した
js,cssなどを導入し直した
bootstrap4のcarouselについての記事を一通り読んだ

行動規範の内容に同意します

回答1件

ベストアンサー

id 属性の値として slides が付与されている div 要素はカルーセル全体を囲んでいる必要がありますが、質問文のコードではインジケータのみを内包しています。また、 Firefox や Chrome などの主要なブラウザは混在コンテンツの読み込みをブロックします。そのため、質問文のコードの場合は、 jQuery の読み込みがそれらのブラウザで行われないということになります。この問題は、 jQuery のスキームを http から https へ変更することで修正出来ます。

Google Online Security Blog: No More Mixed Messages About HTTPS

Today we’re announcing that Chrome will gradually start ensuring that https:// pages can only load secure https:// subresources. In a series of steps outlined below, we’ll start blocking mixed content (insecure http:// subresources on https:// pages) by default. This change will improve user privacy and security on the web, and present a clearer browser security UX to users.

混在コンテンツ - Security | MDN

Firefox 23 以降より、能動的な混在コンテンツはデフォルトでブロックされるようになりました (受動的な混在コンテンツは設定によりブロック可能です)。ウェブ開発者が混在コンテンツのエラーに気付きやすくなるよう、ブロックされた混在コンテンツへのリクエストはウェブコンソールのセキュリティペインにすべて記録されます。

このエラーを修正するには、 HTTP コンテンツへのリクエストをすべて HTTPS コンテンツへのリクエストに差し替えてください。よくある混在コンテンツには JavaScript ファイルやスタイルシート、画像、動画、その他のメディアファイルなどがあります。

以上の 2 点を修正することで、質問文のインジケータは正常に表示されるようになり、質問文の問題は解決します (動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewpoint" content="width=device-width, initial-scale=1">
7    <title>Complete bootstrap 4 website layout</title>
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
10    <link rel="stylesheet" href="style.css">
11  </head>
12
13  <body>
14
15    <div id="slides" class="carousel slide" data-ride="carousel">
16      <ol class="carousel-indicators">
17        <li data-target="#slides" data-slide-to="0" class="active"></li>
18        <li data-target="#slides" data-slide-to="1"></li>
19        <li data-target="#slides" data-slide-to="2"></li>
20      </ol>
21
22      <div class="carousel-inner" role="listbox">
23        <div class="carousel-item active">
24          <img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=background.png" alt="">
25          <div class="carousel-caption">
26            <h1 class="display-2">Bootstrap</h1>
27            <h3>Complete Website Layout</h3>
28            <button class="btn btn-outline-light btn-lg" type="button">VIEW DEMO</button>
29            <button class="btn btn-primary btn-lg" type="button">Get started</button>
30          </div>
31        </div>
32        <div class="carousel-item">
33          <img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=background2.png" alt="">
34        </div>
35        <div class="carousel-item">
36          <img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=background3.png" alt="">
37        </div>
38      </div>
39    </div>
40
41    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
42    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
43    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
44  </body>
45
46</html>