我的滑动自转传送带无法正常工作？我在自定义Wordpress下划线主题中创建了具有自定义帖子类型的循环。帖子，但不动。他们的支持不断发展。另外，导航不起作用。轮播一次显示3张卡片，并循环显示每张卡片。

<div id="myCarousel" class="carousel slide" data-ride="carousel" >
  <div class="carousel-inner row w-100 mx-auto">

    <?php $loop = new WP_Query( array( 'post_type' => 'case_studies','orderby' => 'post_id','order' => 'ASC')) ; ?>

      <?php while ( $loop->have_posts()) : $loop->the_post(); ?>


      <div class="carousel-item col-md-4 active">
        <div class="card">

          <!-- if uploaded an image -->
          <?php if( get_field('case_Study_carousel_frontpage_image')): ?>

            <img class="card-img-top img-fluid" src="<?php the_field('case_Study_carousel_frontpage_image'); ?>" alt="Card image cap">

          <?php endif; ?>

          <div class="card-body">
            <h4 class="card-title"><?php the_title(); ?></h4>
            <p class="card-text">TYEST This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>            
          </div>
        </div>
      </div>


      <?php endwhile; ?>

    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

这是JS。

$(document).ready(function() {
  $("#myCarousel").on("slide.bs.carousel",function(e) {
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $(".carousel-item").length;

    if (idx >= totalItems - (itemsPerSlide - 1)) {
      var it = itemsPerSlide - (totalItems - idx);
      for (var i = 0; i < it; i++) {
        // append slides to end
        if (e.direction == "left") {
          $(".carousel-item")
            .eq(i)
            .appendTo(".carousel-inner");
        } else {
          $(".carousel-item")
            .eq(0)
            .appendTo($(this).find(".carousel-inner"));
        }
      }
    }
  });
});