Bootstrap3のカルーセルがスライドしなくなってしまいました。

###実現したいこと
Bootstrap3でカルーセルを実装したい。

###現状
実際に実装し正常に動作していることを確認したのですが、急遽スライドしなくなってしまいました。
画像は正常に表示されております。
左右のスライドボタンをクリックするとページが下にズレて動く現象が発生しております。
正常に動作していた時との違いは、スムーススクロールの実装とGoogleMapの埋め込みをしたぐらいだと思います。

###試したこと
スムーススクロールとGoogleMapのjavascriptをコメントアウトして動作を確認しましたが、結果は変わらずカルーセルはスライドしませんでした。

###ソースコード

<section class="carousel-size">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000">

            <!-- Wrapper for slides -->
            <div class="carousel-inner container fluid">
              <div class="item active">
                <img src="images/slide1.jpg" alt="slide1" width="100%">
                <div class="carousel-caption">
                  古くから、<br>料理する場、<br>暖をとる場として<br>家族の中心に置かれてきた囲炉裏。
                </div>
              </div>
              <div class="item">
                <img src="images/slide2.jpg" alt="slide2" width="100%">
                <div class="carousel-caption">
                  鉄瓶にゆらゆらと立ち上る湯気、<br>時折ぱちぱちと爆ぜる炭を<br>眺めていると、<br>時間がゆっくり、ゆっくりと<br>流れていきます。
                </div>
              </div>
              <div class="item">
                <img src="images/slide3.jpg" alt="slide3" width="100%">
                <div class="carousel-caption">
                  囲炉裏を囲み、<br>家族が心の中から温まる、<br>そんな場所を作りたくて始めました。
                </div>
              </div>
              <div class="item">
                <img src="images/slide4.jpg" alt="slide4" width="100%">
                <div class="carousel-caption">
                  １つ１つ丁寧に作られた囲炉裏は、<br>あなただけの、<br>世界にたった１つの作品となります。<br>是非、囲炉裏の持つ独自な趣を、<br>体感してください。
                </div>
              </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
          </div>
      </section>

何度もエラーと闘いながら、やっとできたと思っていたカルーセルがまた不具合を引き起こすことになり、とてもショックです。

どなたか上記の情報で何か分かりましたら、アドバイスいただけないでしょうか。

以上、ご確認よろしくお願いいたします。

###参考にならないと思いますが念のため、作成中のサイトのjsファイルを以下に追記（文字数制限のためhtmlを貼れないです）

main.js


/* タブ */

(function() {
   'use strict';

   var menuItems = document.getElementsByClassName('menu_item');
   var contents = document.getElementsByClassName('content');

   var i;

   for (i = 0; i < menuItems.length; i++) {
     menuItems[i].addEventListener('click', function(e) {
       e.preventDefault();

       var i;

       for (i = 0; i < menuItems.length; i++) {
         menuItems[i].className = 'menu_item';
       }
       this.className = 'menu_item active';

       for (i = 0; i < contents.length; i++) {
         contents[i].className = 'content';
       }
       document.getElementById(this.dataset.id).className = 'content active';
     });
   }
 })();

/* タブアニメーション */
//
// $(document).ready(function() {
//
//   $(".animated").waypoint({
//     handler: function(direction) {
//
//       if (direction === "down") {
//
//         $(this.element).addClass("fadeInUp");
//
//         this.destroy();
//       }
//     },
//     offset: "90%"
//   });
// });

 /* 地図 */

 function initMap() {
        var uluru = {lat: 35.941507, lng: 140.138121};
        var map = new google.maps.Map(document.getElementById("map-canvas"), {
          zoom: 18,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }


/* スムーススクロール*/

$(document).ready(function () {
        $(".navbar-nav li a").click(function (event) {
            $(".navbar-collapse").collapse('hide');
        });

        var scroll = new SmoothScroll('[data-scroll]', {
            header: '[data-scroll-header]',
            speed: 700,
            easing: 'easeOutQuad',
            offset: 0,
        });
    });

Zaganchan

2017/11/24 00:47 編集

回答補足のものにバージョンを合わせて見てみましたが特に問題なく動作しました。このソースコード単体とhead情報だけ残したHTMLでもエラーは再現しますか？

narururu

2017/11/24 02:02

ご回答ありがとうございます。私もs8_chuさんから頂いたソースコードを基にimg画像の箇所だけ変更し単品で確認しましたが正常に動作しております。作成中のサイトのコードに何かしらの問題があるのかもと思い、確認しておりました。原因が発見できないままです。膨大なコード量となるため恐縮ではありますが、一応追加でその他のソースコード（css除くhtmlとjsファイル）を質問欄に貼ります。

narururu

2017/11/24 13:11

問題解決しました。アドバイスしてくださりありがとうございました。

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

回答2件

的外れかもしれませんが、質問者さんが想像するような動作は以下のようにすることで実現できると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8    <title>タイトル</title>
9    <style type="text/css">
10        .box {
11            background-color: #000000;
12            height: 500px;
13        }
14    </style>
15</head>
16<body>
17<div class="box"></div>
18<section class="carousel-size">
19    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000">
20        <div class="carousel-inner"><!-- 変更 -->
21            <div class="item active">
22                <img src="https://placehold.jp/ff8f8f/ffffff/150x150.png?text=images/slide1.jpg"
23                     alt="slide1"
24                     width="100%">
25                <div class="carousel-caption">
26                    古くから、<br>料理する場、<br>暖をとる場として<br>家族の中心に置かれてきた囲炉裏。
27                </div>
28            </div>
29            <div class="item">
30                <img src="https://placehold.jp/e98fff/ffffff/150x150.png?text=images/slide2.jpg"
31                     alt="slide2"
32                     width="100%">
33                <div class="carousel-caption">
34                    鉄瓶にゆらゆらと立ち上る湯気、<br>時折ぱちぱちと爆ぜる炭を<br>眺めていると、<br>時間がゆっくり、ゆっくりと<br>流れていきます。
35                </div>
36            </div>
37            <div class="item">
38                <img src="https://placehold.jp/8f93ff/ffffff/150x150.png?text=images/slide3.jpg"
39                     alt="slide3"
40                     width="100%">
41                <div class="carousel-caption">
42                    囲炉裏を囲み、<br>家族が心の中から温まる、<br>そんな場所を作りたくて始めました。
43                </div>
44            </div>
45            <div class="item">
46                <img src="https://placehold.jp/8fffdc/ffffff/150x150.png?text=images/slide4.jpg"
47                     alt="slide4"
48                     width="100%">
49                <div class="carousel-caption">
50                    １つ１つ丁寧に作られた囲炉裏は、<br>あなただけの、<br>世界にたった１つの作品となります。<br>是非、囲炉裏の持つ独自な趣を、<br>体感してください。
51                </div>
52            </div>
53        </div>
54        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
55            <span class="glyphicon glyphicon-chevron-left"></span>
56        </a>
57        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
58            <span class="glyphicon glyphicon-chevron-right"></span>
59        </a>
60    </div>
61</section>
62<div class="box"></div>
63<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
64<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
65</body>
66</html>

投稿2017/11/23 16:31

s8_chu

総合スコア14731

narururu

2017/11/23 23:04

s8_chuさん、ご回答ありがとうございます。ご指摘いただいた変更箇所のcontainer fluidを削除して動作の確認をしましたが、残念ながら状況は変わりませんでした。因みに、bootstrapとJQueryは以下のバージョンで記述しております。 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

s8_chu

2017/11/24 07:33

質問文のコードのBootstrap, jQueryのバージョンを、質問者さんが使用しているものに変更して動作を確認しましたが、正常に動作しているように見えます。キャッシュの消去(http://portal.tac-school.co.jp/faq_system/?id=38)を行ったうえで、質問文のコードをそのまま実行した場合にも以下の現象が再現しますか？ - スライドしない現象 - スライド時にカルーセル内の要素がズレて動く現象

narururu

2017/11/24 10:35

s8_chuさん私の方でも同様に既存のBootstrap, jQueryのバージョンで画像も変更し確認しましたが、正常に動作しております。そして、そのままコードを作成中のサイトのファイルに埋め込んだんですが、スライドしませんでした。スーパーリロードしても結果は変わりませんでした。なので、カルーセル以外のコードに問題があるのかな、と思ってコードを全体的に見直しているところです。。。

narururu

2017/11/24 13:09

s8_chuさん、問題は解決しました。色々アドバイスして下さり本当にありがとうございました。一応、自己解決欄に解決方法を記述しました。原因はわからないままですが。それでは、また！

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

自己解決

皆様

問題は解決しました。
何とかカルーセルが正常に動いた状態で作成中のファイルに組み込むことができました。
問題の切り分けを行うために、
s8_chuさんから頂いたソースコードを基軸に、今まで作成していたコードを各セクション毎に移動し、都度カルーセルの動作を確認してました。
最終的にすべてのセクションを組み込んだ状態でもカルーセルは正常に動いたままなので、とりあえず問題は解決しました。
しかし、原因が何だったのかはわかりません。カルーセルが動かないファイルと今回動いているファイルを比較したのですが、差分は見当たりませんでした。（Winmergeで比較したのですが、空白が違うため殆ど差分ありのオレンジ色に染まり確認が大変、、）
でも、もう気にしません。目的は達成できました！
これも皆さんのおかげです！！
アドバイスを下さった皆様、本当にありがとうございました！！
感謝です！！
そして、これからもよろしくお願いいたしますm(__)m！！