Bootstrap Carouselをローカルで動作させることはできませんが、codepenで動作します

私は自分のサイトでブートストラップカルーセルを動かそうとしていますが、折りたたまれていますが、次のスライドに行くのではなく、少しだけ「ジャンプ」します。ここでBootstrap Carouselをローカルで動作させることはできませんが、codepenで動作します

は順不同であるかもしれない私のヘッダーです：

<div class="carousel slide" id="spinner" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
    <li class="active" data-target="#spinner" data-slide-to="0"></li> 
    <li data-target="#spinner" data-slide-to="1"></li> 
    <li data-target="#spinner" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"><img src="http://placehold.it/600x300"></div> 
    <div class="item"><img src="http://placehold.it/600x300"></div> 
    <div class="item"><img src="http://placehold.it/600x300"></div> 
    </div> 
    <a class="left carousel-control" href="#spinner" role="button" data-slide="prev"> 
    <span class="icon-prev" aria-hidden="true"> 
    </span><span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#spinner" role="button" data-slide="next"> 
    <span class="icon-next" aria-hidden="true"> 
    <span class="sr-only">Next</span></span></a> 
    </div>

として：

<head> 
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="javascript"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="javascript"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js" type="javascript"></script> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
<link href="css/main.css" rel="stylesheet">

そして、ここでは、私はとのトラブルを抱えているカルーセルのためのHTMLですノート、私はこれをCodepenで動作させるようにしましたが、私がコーディングしているマシンでは動作しません。

Carousel on Codepen

私はcodepen上のカルーセルの外観だけの機能に関係していませんよ。

出典

2016-08-23 Chris Rutherford

jQuery 3には、ブートストラップ3との互換性の問題があります。あなたのコードは、jquery 2.2.4を使用しています。 jQueryのバージョンを2.2.4に切り替えます

出典

2016-08-23 20:41:58

_Awesome _感謝！ –

バージョン3.xではなく、以前のバージョンのjQueryで動作します。

スニペット：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="carousel slide" id="spinner" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
     <li class="active" data-target="#spinner" data-slide-to="0"></li> 
 
     <li data-target="#spinner" data-slide-to="1"></li> 
 
     <li data-target="#spinner" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"><img src="http://placehold.it/600x300"></div> 
 
     <div class="item"><img src="http://placehold.it/600x300"></div> 
 
     <div class="item"><img src="http://placehold.it/600x300"></div> 
 
    </div> 
 
    <a class="left carousel-control" href="#spinner" role="button" data-slide="prev"> 
 
    <span class="icon-prev" aria-hidden="true"> 
 
    </span><span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#spinner" role="button" data-slide="next"> 
 
    <span class="icon-next" aria-hidden="true"> 
 
    <span class="sr-only">Next</span></span></a> 
 
</div>

出典

2016-08-23 20:43:46 gaetanoM

これは理にかなっています！私はその問題を認識していませんでした。私はそれに注意する必要があります。 –

このリンクを使用し、あなたの頭のタグで

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

出典

2016-08-23 20:44:19

Bootstrap Carouselをローカルで動作させることはできませんが、codepenで動作します

答えて

関連する問題