私のカルーセルは、それぞれのスライドを1つではなく下にそれぞれ表示しています。カルーセルの写真がお互いの下にあり、スライドの中に入れたいです。
私はお互いの下にある3つのスライドを持っていますが、スライドで「内側」にしたいのですが、何らかの理由で動作しません。
スニペットは以下である:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
\t $('.carousel').carousel({
\t \t interval: 1000
\t })
});
</script>
<script type="text/javascript">
$(document).ready(function(){
\t $(".carousel-inner div:first").addClass("active");
\t });
\t </script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
あなたはコミュニティが簡単に問題のトラブルシューティングするためにjsfiddle例を共有していただけますか? – rawnewdlz
埋め込み方法 – Nexitis
正しいJavaScriptファイルにリンクしていますか? – rawnewdlz