0

** 我已经看到了一些对其他人有用的有用解决方案.. 在我的标签中实现了它们.. 注意到了订单，但我的轮播滑块仍然不会自动启动？有人可以帮忙吗？？请参阅下面的代码：**

<!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 -->
4

3 回答 3

0

您能否删除您的触发属性并尝试

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

应该工作正常..

于 2013-10-08T05:21:35.470 回答
0

Sometimes you need to put the JavaScript file after the carousal. Actually before the end of the page. 

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

Ref: http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

thanks

于 2014-02-03T17:22:12.687 回答
0

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

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

    $('.carousel').carousel('cycle');
});
</script>
于 2013-10-08T10:04:23.167 回答