Bootstrap轮播数据幻灯片不能与WordPress一起使用

时间:2017-12-10 15:58:33

标签: php twitter-bootstrap wordpress-theming

我遇到了一个问题,我的推荐旋转木马99%正常工作但由于某种原因,下图链接中突出显示的旋转木马指示灯不会跳到其他幻灯片点击。

enter image description here

出现鼠标悬停状态,但点击后没有任何反应。我相信我已正确设置了数据幻灯片。

不确定我做错了导致这种情况。

    

    <div class="container">
        <div class="row">
            <div class='col-md-offset-2 col-md-8 text-center'>
                <h2 class="uppercase">Testimonials</h2>
            </div>
        </div>

        <?php $args = array(
            'post_type' => 'testimonial',
            'posts_per_page' => 3
            );

            $the_query = new WP_Query($args);
            if ($the_query->have_posts()) {
        ?>

        <div class='row'>
            <div class='col-md-offset-2 col-md-8'>
                <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                    <ol class="carousel-indicators">
                        <?php 
                            $count = count($the_query->posts);
                            for ($i=0; $i<$count; $i++) {
                        ?>
                        <li data-target="carousel" data-slide-to="<?php echo $i; ?>"<?php
                            if ($i == 0) {
                                ?> class="active"<?php 
                            }
                        ?>></li>
                        <?php 
                            }
                        ?>
                    </ol>

                    <!-- Carousel Slides / Quotes -->
                    <div class="carousel-inner">

                        <?php 
                            $count = 0;
                            while ($the_query->have_posts()) {
                                $the_query->the_post();
                        ?>

                        <div class="item<?php 
                            if ($count == 0) {
                              echo ' active';
                            }
                            ?>">
                            <blockquote>
                                <p><?php echo the_field('testimonial_quote') ?></p>
                                <p><?php echo the_field('testimonial_client_name') ?></p>
                                <p><?php echo the_field('testimonial_business_name') ?></p>
                            </blockquote>
                        </div>

                        <?php 
                          $count++;
                        }
                        ?>

                    </div>
                </div>

            <?php wp_reset_postdata(); 
                }
            ?>

            </div>

        </div>
    </div>
</div>

这是前端输出代码的样子

<div class="col-md-offset-2 col-md-8">
            <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                <ol class="carousel-indicators">

                   <li data-target="carousel" data-slide-to="0" class=""></li>
                   <li data-target="carousel" data-slide-to="1" class=""></li>
                   <li data-target="carousel" data-slide-to="2" class="active"></li>

                </ol>

                <!-- Carousel Slides / Quotes -->
                <div class="carousel-inner">

                    <div class="item">
                        <blockquote>
                            <p>Elliott made suggestions about "big-picture" things that I wouldn't even have thought to ask. If you're thinking about working with Elliott, I highly encourage you to do so! He's friendly, knowledgeable, and gets you results!</p>
                            <p>Nico Moreno</p>
                            <p>Convertt</p>
                        </blockquote>
                    </div> 

                    <div class="item active left">
                        <blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non malesuada diam. Nam lorem velit, placerat id mauris ac, ornare vehicula diam.</p>
                            <p>Gus Davidson</p>
                            <p>Arb &amp; Grounds Equipment</p>
                        </blockquote>
                    </div>

                    <div class="item next left">
                        <blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non malesuada diam. Nam lorem velit, placerat id mauris ac, ornare vehicula diam.</p>
                            <p>Joe Smith</p>
                            <p>Average Joe's Gym</p>
                        </blockquote>
                    </div>

                </div>
            </div>

        </div>

0 个答案:

没有答案