Bootstrap Carousel（カルーセル）が機能しない

カルーセルを使って画像やテキストなどをスライド表示したいです。
左右のコントローラや下部に表示されるインジケーターをクリックすると画像が切り替わる仕組みを出しています。
またページ上を開いていると自動にスライドする仕組みになっています

<!doctype html>
<html lang="en">

<head>
 
  <!-- CSS & Fonts -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- JS -->

<script>
$('.navbar-nav>li>a').on('click', function () {
  $('.navbar-collapse').collapse('hide');
});

$(document).ready(function () {
  $(document).on("scroll", onScroll);
  //smoothscroll
  $('a[href*="#"]')
  .not('[href="#"]')
  .not('[href="#0"]')
  .not('[href="#carouselTestimonials"]')
  .on('click', function (e) {
      event.preventDefault();
      $(document).off("scroll");
      
      $('a').each(function () {
          $(this).removeClass('active');
      })
      $(this).addClass('active');
    
      var target = this.hash,
          menu = target;
      $target = $(target);
      $('html, body').stop().animate({
          'scrollTop': $target.offset().top - 80
      }, 1000, function () {
          $(document).on("scroll", onScroll);
      });
    return false;
  });
});

function onScroll(event) {
  var scrollPos = $(document).scrollTop();
  $('#navbarNav a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top - 80 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('#navbarNav ul li a').removeClass("active"); //added to remove active class from all a elements
      currLink.addClass("active");
    }
    else {
      currLink.removeClass("active");
    }
  });
}
</script>


</head>
<body> 
  <!-- TESTIMONIALS -->
  <div id="carouselTestimonials" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselTestimonials" data-slide-to="0" class="active"></li>
      <li data-target="#carouselTestimonials" data-slide-to="1"></li>
      <li data-target="#carouselTestimonials" data-slide-to="2"></li>
      <li data-target="#carouselTestimonials" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner testimonial-bg" style="background-image:linear-gradient(0deg, rgba(51,51,51,0.85) 0%, rgba(51,51,51,0.85) 100%), url(/images/p1020267.jpg);">
      <div class="section-title text-center">
        <h2 class="font-white my-5">クライアント様のお声<br></h2>
      </div>
      <div class="carousel-item active">
        <div class="testimonial-container text-center w-100">
          <img class="d-block testimonial-avatar mb-2" src="images/testimonial4.jpeg" alt="First testimonial">
          <h3 class="font-white font-weight-bold">Y.S</h3>
          <h3 class="font-white">エンジニア職</h3>
          <p class="font-white">例文がここに入ります。
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="testimonial-container text-center w-100">
          <img class="d-block testimonial-avatar mb-2" src="images/testimonial1.jpeg" alt="First testimonial">
          <h3 class="font-white font-weight-bold">O.S</h3>
          <h3 class="font-white">教育関連</h3>
          <p class="font-white">例文がここに入ります。
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="testimonial-container text-center w-100">
          <img class="d-block testimonial-avatar mb-2" src="images/testimonial2.jpeg" alt="First testimonial">
          <h3 class="font-white font-weight-bold">R.A</h3>
          <h3 class="font-white">総務職</h3>
          <p class="font-white">例文がここに入ります。
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="testimonial-container text-center w-100">
          <img class="d-block testimonial-avatar mb-2" src="images/testimonial3.jpeg" alt="First testimonial">
          <h3 class="font-white font-weight-bold">A.N</h3>
          <h3 class="font-white">営業職</h3>
          <p class="font-white">例文がここに入ります。
          </p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselTestimonials" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselTestimonials" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"></script>')
  </script>
  <script type="text/javascript" src="js/main.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFW" index="-1" role="dialog"  crossorigin="anonymous">

</body>
</html>

そして下記の.js Javascriptファイルを別のフォルダより読み込んでいます。

console.log("Hello
1
2$('.navbar-nav>li>a').on('click', function () {
3  $('.navbar-collapse').collapse('hide');
4});
5
6$(document).ready(function () {
7  $(document).on("scroll", onScroll);
8  //smoothscroll
9  $('a[href*="#"]')
10  .not('[href="#"]')
11  .not('[href="#0"]')
12  .not('[href="#carouselTestimonials"]')
13  .on('click', function (e) {
14      event.preventDefault();
15      $(document).off("scroll");
16      
17      $('a').each(function () {
18          $(this).removeClass('active');
19      })
20      $(this).addClass('active');
21    
22      var target = this.hash,
23          menu = target;
24      $target = $(target);
25      $('html, body').stop().animate({
26          'scrollTop': $target.offset().top - 80
27      }, 1000, function () {
28          $(document).on("scroll", onScroll);
29      });
30    return false;
31  });
32});
33
34function onScroll(event) {
35  var scrollPos = $(document).scrollTop();
36  $('#navbarNav a').each(function () {
37    var currLink = $(this);
38    var refElement = $(currLink.attr("href"));
39    if (refElement.position().top - 80 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
40      $('#navbarNav ul li a').removeClass("active"); //added to remove active class from all a elements
41      currLink.addClass("active");
42    }
43    else {
44      currLink.removeClass("active");
45    }
46  });
47}
48
49

しかし、実際のところ貼り付けた画像から画面は自動的にスライドしない他、
矢印をクリックすると、 https://〇〇.com/#carouselTestimonials と表示され
スライドすらできない状態です。

ChromeのデベロッパーツールからConsoleよりエラーがないか調べましたが、
思い当たるものはありませんでした。
コード自体か、 .jsのスクリプトファイルの読み込みに不具合の可能性があると考えています。

よろしくお願いします。

s8_chu

2019/11/28 21:09

jsFiddle 上で試しましたが、どちらの問題も再現出来ませんでした ( https://jsfiddle.net/3otpgq8r/ )。質問者さんの環境で jsFiddle を閲覧したとき、質問文と同様の問題が再現出来ますか？もし出来ない場合は、再現が出来るようなコードを質問文へ追記していただけませんか？

tomo39-.

2019/11/28 23:30 編集

画像とCSS以外再現できています。

tomo39-.

2019/11/28 23:28

多分他のコードと合わさったときに邪魔をしていてるのだと思います。

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

回答1件

ベストアンサー

body 要素末尾の script 要素には終了タグがありません。
bootstrap.min.js を読み込んでいる script 要素に設定されている integrity 属性のハッシュ値に関するエラーが発生し、このスクリプトが適用されていません。
jQuery により用意されているメソッドを使用する場合は、先に jQuery を読み込んでおかなければ、それらが未定義となりエラーが発生します。

以上の三点を修正すると、以下のようになり、「自動的にスライドしない現象」と「矢印をクリックしてもスライドが移動しない現象」が改善されたことが確認出来ます (動作確認用リンク)。今回は不具合に関係がある可能性が高い箇所のみを修正しましたが、その他にも幾つか修正したほうが良い箇所が存在するため、一度コードを整理してみても良いかもしれません。

HTML
1<!doctype html>
2<html lang="en">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>タイトル</title>
7    <!-- CSS & Fonts -->
8    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
9
10
11    <!-- Optional JavaScript -->
12    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
13    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
14    <script>
15      window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"></script>')
16
17    </script>
18    <script type="text/javascript" src="js/main.js"></script>
19    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
20    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
21    <!-- JS -->
22    <script>
23      $('.navbar-nav>li>a').on('click', function() {
24        $('.navbar-collapse').collapse('hide');
25      });
26
27      $(document).ready(function() {
28        $(document).on("scroll", onScroll);
29        //smoothscroll
30        $('a[href*="#"]')
31          .not('[href="#"]')
32          .not('[href="#0"]')
33          .not('[href="#carouselTestimonials"]')
34          .on('click', function(e) {
35            event.preventDefault();
36            $(document).off("scroll");
37
38            $('a').each(function() {
39              $(this).removeClass('active');
40            })
41            $(this).addClass('active');
42
43            var target = this.hash,
44              menu = target;
45            $target = $(target);
46            $('html, body').stop().animate({
47              'scrollTop': $target.offset().top - 80
48            }, 1000, function() {
49              $(document).on("scroll", onScroll);
50            });
51            return false;
52          });
53      });
54
55      function onScroll(event) {
56        var scrollPos = $(document).scrollTop();
57        $('#navbarNav a').each(function() {
58          var currLink = $(this);
59          var refElement = $(currLink.attr("href"));
60          if (refElement.position().top - 80 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
61            $('#navbarNav ul li a').removeClass("active"); //added to remove active class from all a elements
62            currLink.addClass("active");
63          } else {
64            currLink.removeClass("active");
65          }
66        });
67      }
68
69    </script>
70
71
72  </head>
73
74  <body>
75    <!-- TESTIMONIALS -->
76    <div id="carouselTestimonials" class="carousel slide" data-ride="carousel">
77      <ol class="carousel-indicators">
78        <li data-target="#carouselTestimonials" data-slide-to="0" class="active"></li>
79        <li data-target="#carouselTestimonials" data-slide-to="1"></li>
80        <li data-target="#carouselTestimonials" data-slide-to="2"></li>
81        <li data-target="#carouselTestimonials" data-slide-to="3"></li>
82      </ol>
83      <div class="carousel-inner testimonial-bg" style="background-image:linear-gradient(0deg, rgba(51,51,51,0.85) 0%, rgba(51,51,51,0.85) 100%), url(/images/p1020267.jpg);">
84        <div class="section-title text-center">
85          <h2 class="font-white my-5">クライアント様のお声<br></h2>
86        </div>
87        <div class="carousel-item active">
88          <div class="testimonial-container text-center w-100">
89            <img class="d-block testimonial-avatar mb-2" src="images/testimonial4.jpeg" alt="First testimonial">
90            <h3 class="font-white font-weight-bold">Y.S</h3>
91            <h3 class="font-white">エンジニア職</h3>
92            <p class="font-white">例文がここに入ります。
93            </p>
94          </div>
95        </div>
96        <div class="carousel-item">
97          <div class="testimonial-container text-center w-100">
98            <img class="d-block testimonial-avatar mb-2" src="images/testimonial1.jpeg" alt="First testimonial">
99            <h3 class="font-white font-weight-bold">O.S</h3>
100            <h3 class="font-white">教育関連</h3>
101            <p class="font-white">例文がここに入ります。
102            </p>
103          </div>
104        </div>
105        <div class="carousel-item">
106          <div class="testimonial-container text-center w-100">
107            <img class="d-block testimonial-avatar mb-2" src="images/testimonial2.jpeg" alt="First testimonial">
108            <h3 class="font-white font-weight-bold">R.A</h3>
109            <h3 class="font-white">総務職</h3>
110            <p class="font-white">例文がここに入ります。
111            </p>
112          </div>
113        </div>
114        <div class="carousel-item">
115          <div class="testimonial-container text-center w-100">
116            <img class="d-block testimonial-avatar mb-2" src="images/testimonial3.jpeg" alt="First testimonial">
117            <h3 class="font-white font-weight-bold">A.N</h3>
118            <h3 class="font-white">営業職</h3>
119            <p class="font-white">例文がここに入ります。
120            </p>
121          </div>
122        </div>
123      </div>
124      <a class="carousel-control-prev" href="#carouselTestimonials" role="button" data-slide="prev">
125        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
126        <span class="sr-only">Previous</span>
127      </a>
128      <a class="carousel-control-next" href="#carouselTestimonials" role="button" data-slide="next">
129        <span class="carousel-control-next-icon" aria-hidden="true"></span>
130        <span class="sr-only">Next</span>
131      </a>
132    </div>
133  </body>
134
135</html>