【发布时间】:2015-07-29 08:15:06
【问题描述】:
这让我发疯了,我敢肯定这很愚蠢,但我太烧了,找不到它。我正在构建一个自定义的 WP 主题,它有 2 个滑块,一个是默认的 Bootstrap 滑块,另一个是 Owl 滑块。在您告诉我“为什么不使用 2 个 Owl 滑块实例?”之前,我已经想到了这一点,并且已经过测试并且可以正常工作。但是,我很好奇为什么这不起作用。这是我的代码:
BOOTSTRAP 轮播:
<section id="panel4">
<div class="container">
<h2>Testimonials</h2>
</div>
<!-- container -->
<div class="container-fluid">
<?php $queryObject=new WP_Query( 'post_type=testimonial' ); // The Loop! if ($queryObject->have_posts()) { ?>
<div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while ($queryObject->have_posts()) {$queryObject->the_post(); ?>
<div class="item ">
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2 thumb-box">
<img class="thumb" src="<?php echo types_render_field( " testimonial-avatar ", array( url => "true ", "width " => "400 ", "height " => "300 ", "proportional " => "true " ) );?>">
</div>
<div class="col-sm-9 col-md-10">
<h3>"<?php echo types_render_field("testimonial-excerpt", array("argument1"=>"value1","argument2"=>"value2","argument2"=>"value2")); ?>"</h3>
<blockquote>
<?php echo types_render_field( "testimonial-text", array( "argument1"=>"value1","argument2"=>"value2","argument2"=>"value2")); ?></blockquote>
<p class="sig">
<?php echo types_render_field( "testimonial-name", array( "argument1"=>"value1","argument2"=>"value2","argument2"=>"value2")); ?></p>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-testimonial" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-testimonial" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- .carousel -->
</div>
<!-- .container -->
</section>
然后是猫头鹰滑块
<?php if( have_rows( 'slider_photos') ): ?>
<div class="container-fluid">
<div id="happy" class="owl-carousel">
<?php while( have_rows( 'slider_photos') ): the_row(); // vars $image=g et_sub_field( 'slider_image'); ?>
<div class="item-owl">
<img class="img-responsive" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
</div>
<?php endwhile; ?>
</div>
<!-- .carousel -->
</div>
<?php endif; ?>
现在,问题似乎出在 Bootstrap 中。如果我把它取下来,猫头鹰滑块就可以了。如果我添加 2 个 Owl Slider 实例,它就可以工作。如果我添加 Bootstrap Carousel,只有 Bootstrap 有效,而 Owl 什么也不显示(即使在代码中也没有,就好像它甚至不存在一样)
谁能告诉我发生了什么以及如何解决这个问题?
【问题讨论】:
-
可能是 JavaScript 冲突?您的浏览器控制台中是否有任何错误?
-
我想到了,但完全没有错误,就像它不存在一样
-
更多信息:如果我将 Owl 滑块 放在 Bootstrap Carousel 之前,它也可以工作,只是不能正常工作
标签: php wordpress twitter-bootstrap-3 owl-carousel