我试图使用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'未定义的