Bootstrap Carousel 和我正在构建的主题的问题

Posted 2023-05-08

【中文标题】Bootstrap Carousel 和我正在构建的主题的问题

【英文标题】：Trouble With Bootstrap Carousel and a Theme I am building

【发布时间】：2014-06-26 15:23:49

【问题描述】：

我正在使用 Twitter Bootstrap 构建一个 WP 主题。我想使用旋转木马，但我没有运气让幻灯片改变。我希望你们能帮助我。我似乎无法找出为什么这不起作用。

这是我的sidebar_carousel.php

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

<div class="carousel-inner">
    <?php
    $i = 1;
    $the_query = new WP_Query(array(
        'post_type' => 'ss_carousel',
        'posts_per_page' => 3
    ));
    while ($the_query->have_posts()) :
        $the_query->the_post();
        if ($i == 1) 
            ?>
            <div class="item active">
                <?php the_post_thumbnail('full'); ?>
                <div class="carousel-caption">
                    <h2><?php the_title(); ?></h2>

                    <p><?php the_excerpt(); ?></p>
                    <a class="btn btn-success big" href=""></a>
                </div>
            </div>
        <?php
         else 
            ?>
            <div class="item">
                <?php the_post_thumbnail('full'); ?>
                <div class="carousel-caption">
                    <h2><?php the_title(); ?></h2>

                    <p><?php the_content(); ?></p>
                    <a class="btn btn-success btn-lg" href=""></a>
                </div>
            </div>
        <?php
        
        $i++; endwhile;
    wp_reset_postdata();
    ?>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

这是我的functions.php

//Java for carousel
    if (!function_exists('ss_carousel_exists')) :
        function ss_carousel_exists()
        
            ?>
            <script type="text/javascript">
                jQuery(document).jQuery(function ($) 
                    jQuery('#myCarousel').carousel(
                        interval: 7000
                    )
                );
            </script>
        <?php
        

        add_action('wp_footer', 'ss_carousel_exists');
    endif;

【问题讨论】：

嗨，我不知道这是否是您的问题的原因，但 WordPress 建议使用 wp_enqueue_script() 将 javascript 添加到页面。 Personnaly 我不知道像你那样添加 javascript 是否是一种有效的方法。祝你好运。

感谢您的回复。我确实尝试过 wp_enqueue_script() 也没有用。我以前以这种方式将java添加到我的主题中并且已经奏效。我以这种方式添加代码的唯一原因是为了进行故障排除，所以我没有点击页面并迷路。哈哈这发生在我身上很多

你有任何console.log错误信息吗？

我确实做到了。未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery - 修复了忘记数组（'jquery'）

解决了幻灯片的问题。更感谢你让我免于将头撞到墙上而导致脑震荡。

【参考方案1】：

在 Richer 的帮助下，我发现了我遇到的问题。我有一个错字。如果你想在 WordPress 主题中使用引导轮播，上面的代码可以工作。