質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.36%

  • Bootstrap

    687questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

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

解決済

回答 2

投稿 2017/11/24 00:30 ・編集 2017/11/24 11:42

  • 評価
  • クリップ 0
  • VIEW 75

narururu

score 12

実現したいこと

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">
                  1つ1つ丁寧に作られた囲炉裏は、<br>あなただけの、<br>世界にたった1つの作品となります。<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,
        });
    });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Zaganchan

    2017/11/24 09:47 編集

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

    キャンセル

  • narururu

    2017/11/24 11:02

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

    キャンセル

  • narururu

    2017/11/24 22:11

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

    キャンセル

回答 2

check解決した方法

0

皆様

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

投稿 2017/11/24 22:02

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>タイトル</title>
    <style type="text/css">
        .box {
            background-color: #000000;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<section class="carousel-size">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000">
        <div class="carousel-inner"><!-- 変更 -->
            <div class="item active">
                <img src="https://placehold.jp/ff8f8f/ffffff/150x150.png?text=images/slide1.jpg"
                     alt="slide1"
                     width="100%">
                <div class="carousel-caption">
                    古くから、<br>料理する場、<br>暖をとる場として<br>家族の中心に置かれてきた囲炉裏。
                </div>
            </div>
            <div class="item">
                <img src="https://placehold.jp/e98fff/ffffff/150x150.png?text=images/slide2.jpg"
                     alt="slide2"
                     width="100%">
                <div class="carousel-caption">
                    鉄瓶にゆらゆらと立ち上る湯気、<br>時折ぱちぱちと爆ぜる炭を<br>眺めていると、<br>時間がゆっくり、ゆっくりと<br>流れていきます。
                </div>
            </div>
            <div class="item">
                <img src="https://placehold.jp/8f93ff/ffffff/150x150.png?text=images/slide3.jpg"
                     alt="slide3"
                     width="100%">
                <div class="carousel-caption">
                    囲炉裏を囲み、<br>家族が心の中から温まる、<br>そんな場所を作りたくて始めました。
                </div>
            </div>
            <div class="item">
                <img src="https://placehold.jp/8fffdc/ffffff/150x150.png?text=images/slide4.jpg"
                     alt="slide4"
                     width="100%">
                <div class="carousel-caption">
                    1つ1つ丁寧に作られた囲炉裏は、<br>あなただけの、<br>世界にたった1つの作品となります。<br>是非、囲炉裏の持つ独自な趣を、<br>体感してください。
                </div>
            </div>
        </div>
        <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>
<div class="box"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

`

投稿 2017/11/24 01:31

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/24 08: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>

    キャンセル

  • 2017/11/24 16:33

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

    キャンセル

  • 2017/11/24 19:35

    s8_chuさん

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

    キャンセル

  • 2017/11/24 22:09

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • Bootstrap

    687questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。