Bootstrap：滑块无法正常工作

时间：2015-04-18 17:33:44

标签： javascript jquery css twitter-bootstrap

我正在使用this标签式滑块。请访问链接以查看它的实际效果。这是我的CODE 

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 4000
  });

  var clickEvent = false;

  $('#myCarousel').on('click', '.nav a', function() {
    clickEvent = true;
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');
  });

  $('#myCarousel').bind('slid', function() {
    // Get currently selected item
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#myCarousel .nav li').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#myCarousel .nav li:nth-child(' + index + ')').addClass('active');
  });
});
#myCarousel .nav a small {
  display: block;
}
#myCarousel .nav {
  background: #eee;
}
.nav-justified > li > a {
  border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a {
  background-color: #16a085;
}
.nav-pills>li[data-slide-to="1"].active a {
  background-color: #e67e22;
}
.nav-pills>li[data-slide-to="2"].active a {
  background-color: #2980b9;
}
.nav-pills>li[data-slide-to="3"].active a {
  background-color: #8e44ad;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
    </div>
    <!-- End Carousel Inner -->
    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a>
      </li>
    </ul>
  </div>
  <!-- End Carousel -->
</div>

我包含的jQuery文件

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

问题是我的滑块活动标签不会改变。 First tab is always active和顶部滑块不断变化。如果有人可以帮我，

1 个答案:

答案 0 :(得分：2)

请将轮播视听的事件从slid更改为slid.bs.carousel 

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 4000
  });

  var clickEvent = false;

  $('#myCarousel').on('click', '.nav a', function() {
    clickEvent = true;
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');
  });

  $('#myCarousel').on('slid.bs.carousel', function() {
    // Get currently selected item
    
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#myCarousel .nav li').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#myCarousel .nav li:nth-child(' + index + ')').addClass('active');
  });
});
#myCarousel .nav a small {
  display: block;
}
#myCarousel .nav {
  background: #eee;
}
.nav-justified > li > a {
  border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a {
  background-color: #16a085;
}
.nav-pills>li[data-slide-to="1"].active a {
  background-color: #e67e22;
}
.nav-pills>li[data-slide-to="2"].active a {
  background-color: #2980b9;
}
.nav-pills>li[data-slide-to="3"].active a {
  background-color: #8e44ad;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
    </div>
    <!-- End Carousel Inner -->
    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a>
      </li>
    </ul>
  </div>
  <!-- End Carousel -->
</div>

相关问题
最新问题