8

Twitter ブートストラップ カルーセルを実装しようとしていますが、機能していません。画像が自動的に切り替わらず、前/次のボタンが機能しません。

Bootstrap Carousel Not Automatically SlidingおよびBootstrap Carousel Not workingで提案されているように、jquery 1.7.1 に切り替えてみましたが、何も役に立たないようです。

どんなアイデアでも大歓迎です。

<!DOCTYPE html>
<html>
    <head>
        <title>Slideshow Test</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap-transition.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide" style="width:450px">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active"><img src="img/IMG_2.jpg"></div>                
                <div class="item"><img src="img/IMG_3.jpg"></div>
                <div class="item"><img src="img/IMG_1.jpg"></div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>    
    </body>
</html>

www.abbymilberg.com/bootstrapで、これとそのリンク ファイルを表示できます。

4

10 に答える 10

24

適切な順序で .js を含めても同じ問題があり、次のように「onclick」イベントで JavaScript を unsing して修正しました。

<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">‹&lt;/a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="$('#myCarousel').carousel('next')">›&lt;/a>

それが最もクリーンなソリューションではないことは知っていますが、機能します。

于 2013-03-06T09:11:58.183 に答える
13

jquery.js をインクルードした後に、bootstrap.js をインクルードする必要があります。

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.js"></script>
于 2012-09-23T01:14:10.690 に答える
3

私は同じ問題を抱えていたので、css に z-index を追加して修正しました。

.carousel-control.left, .carousel-control.right {
  left: 0;
  z-index: 1;
}
于 2017-01-19T21:05:47.760 に答える
2

コントロールが開始する前に「carousel-inner」を閉じてみてください

<div id="myCarousel" class="carousel slide" style="width:450px">
    <div class="carousel-inner">
        <div class="item active"><img src="img/IMG_2.jpg"></div>                
        <div class="item"><img src="img/IMG_3.jpg"></div>
        <div class="item"><img src="img/IMG_1.jpg"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>
于 2012-09-23T01:14:31.017 に答える
0

以下のコードを使用すると役立ちます

ボタンはうまく機能します

コード スニペットを実行して、問題が解決するかどうかを確認します

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(4).jpg" alt="Chicago" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(6).jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

于 2020-09-25T05:03:54.697 に答える