web-dev-qa-db-ja.com

Bootstrapカルーセル：インジケーターが循環しない

Bootstrapからカルーセルを実装しようとしています。

カルーセルインジケーター（「.carousel-indicators」）がスライドを循環していないことを除いて、すべてが正常に機能しています。

これは完全に削除されたページです ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<meta name="description" content="">
<title>Test Home Page</title>
<link href="http://s3.amazonaws.com/stockpr-test-store/esph2/files/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
    li.active {
        color:red;
    }
</style>
</head>
<body>
    <div class="container">
    <h1>Test</h1>
        <div id="myCarousel" class="carousel slide">
            <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>
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 1"></div>
                <div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 2"></div>
                <div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 3"></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>
    </div><!--//container-->

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://s3.amazonaws.com/stockpr-test-store/esph2/files/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel();
</script>
</body>

これは、 http://Twitter.github.com/bootstrap/javascript.html#carousel の例とほぼ同じです。なぜスライドしないのかについてのアイデアはありますか？

javascripttwitter-bootstrapcarousel
8
magzalez

Bootstrap cssファイルとJavaScriptファイルを最新バージョンに更新します。

14
Billy Moat

私は自分の仕事をすることができませんでした（何が起こっているのかわかりません）が、これが私がそれをそれのように見せた方法です：

HTML

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="myCarousel-target active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="myCarousel-target"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="myCarousel-target"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div data-slide-no="0" class="item carousel-item active"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 1"></div>
        <div data-slide-no="1" class="item carousel-item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 2"></div>
        <div data-slide-no="2" class="item carousel-item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 3"></div>
    </div>
</div>

JavaScript

<script type="text/javascript">
    $(function() {
        $('#myCarousel').carousel({interval: 2000});
        $('#myCarousel').on('slid', function() {
            var to_slide = $('.carousel-item.active').attr('data-slide-no');
            $('.myCarousel-target.active').removeClass('active');
            $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
        });
        $('.myCarousel-target').on('click', function() {
            $('#myCarousel').carousel(parseInt($(this).attr('data-slide-to')));
            $('.myCarousel-target.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

乾杯！

7
Wallter

ここにあります

<div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
              <div id="0" class="item active">
                <img src="image/snow1.jpg" alt="">
                <div class="carousel-caption">
                  <h4>First Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div id="1" class="item">
                <img src="image/snow2.jpg" alt="">
                <div class="carousel-caption">
                  <h4>Second Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </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>
<script>
$(document).ready(function() {
  $('.carousel').carousel();
  $('.carousel').on('slid', function() {
    var to_slide = $('.carousel-inner .item.active').attr('id');
    $('.carousel-indicators').children().removeClass('active');
    $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
  });
});
</script>

それがあなたを助けることを願っています

5
FonkyJu

同じ問題が発生し、/ jsフォルダーからbootstrap-carousel.jsを削除するだけで解決しました。

0
Robert Novak