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

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

ただいまの
回答率

89.70%

Bootstrapのcarousel/次の→を押すとページが中途半端な場所で止まる

受付中

回答 0

投稿

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

chiiiiii

score 13

前提・実現したいこと

現在Bootstrapでcarouselスライダーを正しく表示したい。
また、bootstrapのcarouselにしたのに携帯画面にした時に大きさが大きいままです。

cloud9でLaravelを使用して実装しております。

発生している問題・エラーメッセージ

次の→ボタンを押すと画像が中途で止まってしまいます。
下記のURLが現時点です。
https://gyazo.com/9a88296cb32941a8b99394f6dc22de85

html

<div class="row">
    <div class="col-md-12">
        <div id="carousel_top">
            <div class="carousel">
<div id="carousel-sample" class="carousel slide" data-ride="carousel">
    <!-- 以下は画像下部の○○○の部分の設定-->
    <!-- class="active"で初期に表示される画像を設定している-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-sample" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-sample" data-slide-to="1"></li>
        <li data-target="#carousel-sample" data-slide-to="2"></li>
        <li data-target="#carousel-sample" data-slide-to="3"></li>
    </ol>


    <!--画像スライドの中身-->
<ul class="slides slide-list carousel-inner carousel-sampl_list">
    <li class="slide-item carousel-item active">
        <img class="d-block" alt="" src="{{ asset('storage/img/01.jpg') }}">
        <div class="carousel-caption"></div>
    </li>
    <li class="slide-item carousel-item">
        <img class="d-block" alt="" src="{{ asset('storage/img/02.jpg') }}">
        <div class="carousel-caption">
        </div>
      </li>
      <li class="slide-item carousel-item">
        <img class="d-block" alt="" src="{{ asset('storage/img/03.jpg') }}">
        <div class="carousel-caption"></div>
      </li>
      <li class="slide-item carousel-item">
        <img class="d-block" alt="" src="{{ asset('storage/img/04.jpg') }}">
        <div class="carousel-caption"></div>
      </li>
    </ul>

     <a class="carousel-control-prev" href="#carousel-sample" 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="#carousel-sample" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>
             </div>
        </div>
    </div>
</div>

css

.slide_spring_list {
            margin: 0 auto;
            padding-left: 0px;
            max-width: 100%;
            max-height: 100%;
        }

        .slide-item.carousel-item {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            text-align: center;
        }

試したこと

デペロッパーツールで原因を探したのですがわかりませんでした。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • _Victorique__

    2019/04/16 19:18

    単に中央揃えされてないだけではないでしょうか?

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 89.70%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる