不能读取property 'slice'在WordPress上应用carousel from boots

Cannot read property 'slice' of undefined when applying carousel from bootstrap on WordPress

本文关键字：应用 boots from WordPress carousel slice 不能读 读取 property 不能      更新时间：2023-09-26

我试图使用carousel.js从Bootstrap在Wordpress上。我使用一个简单的wordpress主题——Twenty Fourteen，然后将上述代码添加到一个新页面中。不包括其他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>

有谁能解释一下为什么会这样吗?提前感谢!!

我刚刚在Bootstrap 3.2.0和Wordpress 3.9.2中得到了完全相同的东西，并在我的情况下找到了一种方法。

我使用Wordpress短代码输出carousel内容。不幸的是，wpautop过滤器在输出中添加了一些不需要的标记，这破坏了轮播。

短期的解决办法是删除wpautop过滤器。我将这一行添加到functions.php

remove_filter('the_content'， 'wpautop');

实际上在进一步的开发中，这个问题与不设置有关第一项"活动"。你可以把幻灯片留在那里，但你必须这样做有一个活跃的开始。——geilt

此解决方案可用于幻灯片效果。

我不得不从定义。carousel的主div中删除。slide类来解决这个问题。我还建议在你自己的自定义JS中进行初始化，因为Wordpress默认情况下不使用jQuery的$变量，这可能会导致问题。

这有点晚了，但是看看在浏览器中呈现的源代码。Wordpress有一个习惯，用p标签包装元素。在我的例子中，我发现Wordpress在我的旋转木马内部添加了一个空段落，这导致了这个问题。

为了解决这个问题，我删除了Wordpress中carousel的关闭div之间的所有空白。

在我的例子中，我使用的是一个已经有了bootstrap js定义的understrap主题，但是，听起来很愚蠢，我已经在wp_enqueue_scripts中挂起了我自己的bootstrap .js，这个愚蠢的步骤花了我宝贵的生命4个小时。

请参考下面的答案，因为它对我有效。我刚刚删除了data-ride="carousel"

Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth'未定义的

相关文章：