javascript - WordPress 主题中 slider 的自定义帖子在浏览器中首次加载后不起作用

Question

加载浏览器后 WordPress 自定义 slider 未运行。我认为活跃类并不适用于每个项目，但我无法修复它。请检查代码。这是 JavaScript 代码:

jQuery(function($) {
    'use strict',
    //#main-slider
    $(window).load(function() {
        $('#main-slider.carousel').carousel({
            interval: 1000
        });
    });
});

请查看我上面提到的 JavaScript 代码。

您可以在此处查看 HTML 和 PHP 代码:

<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<?php
global $post;
$c = 0;
$args = array(
'post_type' => 'slide',
'posts_per_page' => 5
);
$myposts = get_posts( $args );
foreach( $myposts as $post ) :
setup_postdata($post); 

$class = ''; $c++;

$slide_bg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'slide-bg');
if ( $c == 1 ) $class = ' active';
else $active = '';
?>
<div class="item <?php echo $class; ?>" style="background-image: url(<?php echo  $slide_bg[0];?>)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1"><?php the_title(); ?></h1>
<h2 class="animation animated-item-2"><?php the_content();?></h2>
<a class="btn-slide animation animated-item-3" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!--/.item-->
<?php endforeach; wp_reset_postdata(); ?>
</div>
<!--/.carousel-inner-->
</div>
<!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section>
<!--/#main-slider-->

请查看帖子的自定义帖子循环。这是完整的网站模板—— https://www.dropbox.com/s/fmqbjb9hahliwf6/mysite.zip?dl=0

Answer 1

选择器的目标是具有 id 为 main-slider 和 class of carousel 的 dom 元素。在它们之间添加一个空格应该可以达到下面的效果。

$(window).load(function() {
    $('#main-slider .carousel').carousel({
        interval: 1000
    });
});