在WordPress上从bootstrap应用轮播时,无法读取未定义的属性'slice'

Question

我试图在Wordpress上使用Bootstrap的carousel.js.我使用一个简单的wordpress主题 - 二十四,然后将上面的代码添加到一个新页面.没有包含其他js文件.它在Safari和Chrome上都不适合我.

看到这个是令人沮丧的:http: //g.recordit.co/cOEbBrW0FQ.gif

左转时,滑梯效果很好.但是,当它到达右端时,它会触发错误消息然后再次不起作用!

此外,当我将它放入一个单独的html文件(没有wordpress的影响)时,上面的代码确实有效.

http://tinypic.com/r/28c0eig/8

很抱歉这里缺少图片(因为我的声誉不到10)

这是测试代码:

   <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>This is my first image!</p>
      </div>
    </div>
    <div class="item">
      <img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>This is my second image!</p>
      </div>
    </div>
    <div class="item">
      <img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>This is my third image!</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

任何人都可以解释为什么会发生？提前致谢!!

Answer 1

我刚刚使用Bootstrap 3.2.0和Wordpress 3.9.2得到了完全相同的东西,并在我的案例中找到了一种方法.

我使用Wordpress短代码输出轮播内容.不幸的是,wpautop过滤器在输出中添加了一些不需要的标记,这打破了旋转木马.

短期解决方案是删除wpautop过滤器.我将此行添加到functions.php中

remove_filter('the_content','wpautop');

希望这有助于某人.