在 wordpress 主题的浏览器中首次加载后轮播不工作

Question

加载浏览器后 WordPress 自定义滑块不运行。我认为活动 class 不适用于每个项目，但我无法修复它。请查看代码并帮助我---

Here is the JavaScript coding

jQuery(function($) {'use strict',

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

});

Please review the custom post loop of the post. Here is the full site templates--
https://www.dropbox.com/s/fmqbjb9hahliwf6/mysite.zip?dl=0

   <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');?>  
   <?php 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-->

Answer 1

您确定 select 滑块正确吗？

因为 $('#main-slider.carousel') 的意思是“give me slider with id=main-slider 和 class=carousel，但据我所知，从提供的代码来看，你的情况必须是

$('#main-slider .carousel').carousel({});

在 wordpress 主题的浏览器中首次加载后轮播不工作

Carousel not working after first loading in browser in wordpress theme

wordpress

upload

slider