Question

**我见过几个有用的解决方案，适用于其他人..在我的标签中实现它们..注意到订单但仍然我的轮播滑块不会自动启动？谁能帮忙？请参阅以下代码：**

<!DOCTYPE html>
<html>
<head>
 <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

    <!-- Bootstrap jQuery plugins compiled and minified -->
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
        $('#this-carousel-id').carousel({                // For Carousel Image Slider
            interval: 4000,
            cycle: true,
            }).trigger('slid');

    </script>  
</head>

<body>
<!--  Carousel - consult the Twitter Bootstrap docs at 
      http://twitter.github.com/bootstrap/javascript.html#carousel -->

<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active"><!-- class of active since it's the first item -->
      <img src="/images/3plogo.jpg" alt="" />
      <div class="carousel-caption">
        <p>Check out our Latest Events</p>
      </div>
    </div>
    <div class="item">
      <img src="/images/cs.jpg" alt="" />
      <div class="carousel-caption">
        <p>We can help with getting you Corporate Sponsorships</p>
      </div>
    </div>
    <div class="item">
      <img src="/images/edp.jpg" alt="" />
      <div class="carousel-caption">
        <p>We do Event Design & Planning </p>
      </div>
    </div>
    <div class="item">
      <img src="/images/brandmanagement.jpg" alt="" />
      <div class="carousel-caption">
        <p>Brand Management you can count on!</p>
      </div>
    </div>
  </div><!-- /.carousel-inner -->
  <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div><!-- /.carousel -->

<!-- end carousel -->

Answer 1

您可以删除触发器属性并尝试

$(document).ready(function() {
    $('.carousel').carousel({
   interval: 2000
  })

应该可以正常工作..

Answer 2

在twitter bootstrap 3中，您应该在初始化轮播后调用carousel('cycle')方法：

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>

Answer 3

有时您需要将JavaScript文件放在carousal之后。实际上在页面结束之前。

<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() { 
  $('#myCarousel').carousel({ interval: 3000, cycle: true });
}); 
</script>

参考：http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

感谢

转盘不会自动启动

3 个答案: