Bootstrap carousel 不会在加载时启动，并且在悬停时滑动停止答案

【问题标题】：Bootstrap carousel doesn't start on-load and sliding stops with hoverBootstrap carousel 不会在加载时启动，并且在悬停时滑动停止
【发布时间】：2014-09-26 16:36:44
【问题描述】：

我有这段 HTML 代码。整个部分在 id="main-slider" 中。除非我单击箭头，否则轮播不会滑动，之后它就可以完美运行。我面临的另一个问题是滑块是整页滑块。默认情况下，引导程序在悬停时停止滑动。我不希望这种效果发生。为了解决这两个问题，我给了 jQuery 函数来覆盖它，但似乎没有任何效果。在 Github 和这个地方花了 6 个小时阅读和尝试几乎所有东西后，最终决定在这里寻求帮助。

    <section id="main-slider">
    <div class="carousel slide">
      <ol class="carousel-indicators ">
        <li class="active" data-slide-to="0" data-target="#main-slider"></li>
        <li data-slide-to="1" data-target="#main-slider"></li>
        <li data-slide-to="2" data-target="#main-slider"></li>
        <li data-slide-to="3" data-target="#main-slider"></li>
      </ol>
    <div class="carousel-inner">
      <div class="item active" style="background-image: url(images/slider1.jpg)">
        <div class="container">
          <div class="row">
            <div class="col-sm-12">
              <div class="carousel-content centered">
                <div class="center" id="text-position"> <!-- self defined class in css-->
                  <h2></h2>
                    <p></p>
                      <a class="btn btn-md-primary></a>
                </div> <!-- /center -->
              </div> <!-- /carousel-content -->
            </div> <!-- /col-sm -->
          </div> <!-- /row -->
        </div> <!-- /container -->
      </div> <!-- /item active -->
    <!--I have 3 more similar rows-->
    </div> <!-- carousel ends -->

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <script>
    $(function(){
    $('#main-slider.carousel').carousel({
        interval: 2000,
        pause: false
        });
    });
   </script>

【问题讨论】：

你能在 jsfiddle 或 codepen 上设置它，这样我们就可以看到一个“工作”的例子
它似乎适用于此。请在此处找到链接jsfiddle.net/u8j9925w/3
自动滑动现在可以正常工作了.. 最后包含了这个 JavaScript.. 仍然面临鼠标悬停时滑块停止的问题（整页滑块网站）..
您的 JSFiddle 标记和 javascript 与上述明显不同。请务必遵循 Bootstrap 文档 (getbootstrap.com/javascript/#carousel)，了解如何仔细设置轮播，这是开始使用它的最佳方式。然后你可以从那里根据需要设置它的样式。

标签： jquery twitter-bootstrap hover slider carousel

【解决方案1】：

您是否尝试过使用data- 属性方法，而不是使用Javascript 初始化程序？例如

<div class="carousel slide wet-asphalt" data-ride="carousel" data-interval="2000" data-pause="false">

不要忘记删除您的 Javascript 初始化程序。

【讨论】：