wordpress主题中滑块的自定义帖子在浏览器中首次加载后不起作用

Custom post for slider in wordpress theme not working after first loading in browser

本文关键字：浏览器 加载 不起作用 自定义 wordpress      更新时间：2023-09-26

WordPress自定义滑块在加载浏览器后未运行。我认为活动类不是对每一项都有效，但我无法修复它。请查看代码。这是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

选择器的目标是具有id of main-slider和class of carousel的dom元素。在它们之间添加一个空格应该可以按照下面的方法完成操作。

$(window).load(function() {
    $('#main-slider .carousel').carousel({
        interval: 1000
    });
});
相关文章：