前提・実現したいこと
現在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; }
試したこと
デペロッパーツールで原因を探したのですがわかりませんでした。
あなたの回答
tips
プレビュー