[解決済み] Bootstrap のカルーセルがスライドしない
2022-02-01 09:14:30
質問
Bootstrapのカルーセルを使おうとして、ある程度成功しています。画像もクリックで変更できるようになりました。しかし、一つ問題があります。それはちょうどスライドしません どこが悪いのでしょうか?
htmlを使用しています。
<div id="my_carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target = "#my_carousel" data-slide-to = "0" class="active"></li>
<li data-target = "#my_carousel" data-slide-to = "1"></li>
<li data-target = "#my_carousel" data-slide-to = "2"></li>
</ol>
<div class="carousel-inner i">
<div class="item active">
<img src="images/f3.jpg" alt = "i1" class="img-responsive">
</div>
<div class="item">
<img src="images/f2.jpg" alt = "i2" class="img-responsive">
</div>
<div class="item">
<img src="images/f1.jpg" alt = "i3" class="img-responsive">
</div>
</div>
<a class="carousel-control left" href="#my_carousel" data-slide = "prev">
<span class="icon-prev left"></span>
</a>
<a class="carousel-control right" href="#my_carousel" data-slide = "next">
<span class="icon-next right"></span>
</a>
</div>
EDITです。
jqueryを使用します。
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
解決方法は?
このスクリプトを入れましたか?
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 2000
})
});
</script>
また、うまくいかない場合でも、jqueryを呼び出す前に上記のスクリプトを呼び出しているかどうかを確認してください。つまり、このような状態になっているはずです。
<!-- Calling jquery first -->
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
<!-- Carousel -->
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>
関連
-
[解決済み] カルーセルで画像を中央に配置する方法
-
[解決済み] BootstrapがUncaught Errorを投げる:BootstrapのJavaScriptはjQueryを必要とする【終了】。
-
[解決済み] JQuery Fancyboxが動作しない
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQueryでクリックされた要素のIDを取得する方法
-
[解決済み】jQueryのセレクタにワイルドカードを使用した場合
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] jQuery ValidateプラグインでaddMethodを使用する
-
[解決済み] .NET 4.5のMSAjaxとWebFormsJSのドキュメントはどこにあるのでしょうか?
-
[解決済み] jQueryで文字色を変更するにはどうすればよいですか?
-
[解決済み] jquery-rails」と「jquery-ui-rails」は、1つのプロジェクトで管理することができるのでしょうか?
-
[解決済み] jQuery .validate() submitHandler が起動しない
-
[解決済み] フォーム送信のjQueryが動作しない
-
[解決済み] jQueryセレクタの直下型(>)と子孫型の違いは何ですか?