Question

基本的bootstrap轮播有问题。例如，我只想让幻灯片每四秒移动一次。轮播看起来像这样：

＆＃13;

$(document).ready(function() {
    fixCarousel();
});

function fixCarousel() {
$('.carousel').carousel({
   interval: 1000*4
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://via.placeholder.com/750x150" alt="Image">
        <div class="carousel-caption car_slide">
          <h3 class="slide_text">Suppliers of skilled Workforce</h3>
          <a class="page-scroll" href="#services">
          <button class="learn_more_button btn btn-primary">
            LEARN MORE
          </button>
          </a>
        </div>
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/750x150" alt="Image">
        <div class="carousel-caption car_slide">
          <h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
          <a class="page-scroll" href="#services">
          <button class="learn_more_button btn btn-primary">
            LEARN MORE
          </button>
          </a>
        </div>
      </div>
    </div>

</div>

＆＃13;

但奇怪的事情正在发生。它工作一次，另一次等待10秒，然后几秒，然后，它正常，然后，它停止循环...

任何解决方案？感谢。

Answer 1

您可以使用解决方案https://jsfiddle.net/zj6bj6cj/

$(document).ready(function() {
  $('.carousel').carousel({
   		interval: 1000*4
  });
});

img {
  height: 300px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://via.placeholder.com/350x15" alt="Image">
        <div class="carousel-caption car_slide">
          <h3 class="slide_text">Suppliers of skilled Workforce</h3>
          <a class="page-scroll" href="#services">
          <button class="learn_more_button btn btn-primary">
            LEARN MORE
          </button>
          </a>
        </div>
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/350x15" alt="Image">
        <div class="carousel-caption car_slide">
          <h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
          <a class="page-scroll" href="#services">
          <button class="learn_more_button btn btn-primary">
            LEARN MORE
          </button>
          </a>
        </div>
      </div>
    </div>

</div>

Bootstrap旋转木马乱了

1 个答案: