Javascript 如何在WordPress中创建响应性图像旋转木马和幻灯片自定义帖子类型内容

我想创建一个快速响应的图像传送带和幻灯片自定义帖子类型的内容，如特色图像、标题等

我通过以下方式创建了自定义帖子类型作为横幅：

function create_banners_post_type() {
    $labels = array(
        'name' => __( 'Banners' ),
        'singular_name' => __( 'banner' ),
        'add_new' => __( 'New banner' ),
        'add_new_item' => __( 'Add New banner' ),
        'edit_item' => __( 'Edit banner' ),
        'new_item' => __( 'New banner' ),
        'view_item' => __( 'View banner' ),
        'search_items' => __( 'Search banners' ),
        'not_found' =>  __( 'No banners Found' ),
        'not_found_in_trash' => __( 'No banners found in Trash' ),
    );
    $args = array(
        'labels' => $labels,
        'has_archive' => true,
        'public' => true,
        'hierarchical' => false,
        'supports' => array(
            'title',
            'editor',
            'excerpt',
            'custom-fields',
            'thumbnail',
            'page-attributes'
        ),
        'taxonomies' => array( 'post_tag', 'category'),
    );


    register_post_type( 'banner', $args );

 }
add_action( 'init', 'create_banners_post_type' );

并在首页上显示输出：

// function to show home page banner using a query of banner post type

    function home_page_banner() {?>


    <?php   
$query = new WP_Query( array(
            'post_type' => 'banner',
        ));

        if ( $query->have_posts() ) { ?>

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

            <li> 
                <div>
                    <div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
                    <div class="content-wrap">
                    <h1><?php the_title(); ?></h1>
                    <?php the_content(); ?>
                    <a href="#section-b" class="btn">Read More</a>
                    </div>
                </div>
            </li> 


            <?php 
            endwhile;?> 
        </ul> 
            </div>
            <?php

       }
        wp_reset_postdata();

    }

//使用横幅帖子类型的查询显示主页横幅的函数
函数主页\页\横幅（）{？>


试试这个代码

// function to show home page banner using a query of banner post type

function home_page_banner() {?>
 <div class="carousel" data-transition="slide">
<?php   
    $query = new WP_Query( array(
        'post_type' => 'banner',
    ));

    if ( $query->have_posts() ) { ?>

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

            <div>
                <div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
                <div class="content-wrap">
                <h1><?php the_title(); ?></h1>
                <?php the_content(); ?>
                <a href="#section-b" class="btn">Read More</a>
                </div>
            </div>
        <?php 
        endwhile;?> 
         </div> 
        <?php

   }
    wp_reset_postdata();
}

//使用横幅帖子类型的查询显示主页横幅的函数
函数主页\页\横幅（）{？>
我以前从未使用过猫头鹰旋转木马，但每当我要做旋转木马时，我会去Slick或Flickity——基本上有你可能需要的一切



下面是一个如何在旋转木马中包含帖子内容的示例

创建初始查询：

<?php 
  // the query
  $recent_posts = new WP_Query( array(
    'category_name' => 'posts',
    'posts_per_page' => 3,
  )); 
?>

<script>
  jQuery(document).ready(function() {
    var slider = jQuery('.posts-slider'); // The class name of the wrapper div

    slider.flickity({
      cellAlign: 'left',
      contain: true
    });
  });
</script>



创建您的滑块

<div class="posts-slider"> <? // this is your wrapper div ?>
  <?php if ( $recent_posts->have_posts() ) : ?>
    <?php while ( $recent_posts->have_posts() ) : $recent_posts->the_post(); ?>

      <div class="recent-post-slide">
        <div class="recent-post-content">
          <div class="row">
            <div class="col-12">

              <div>
                <div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
                  <div class="content-wrap">
                  <h1><?php the_title(); ?></h1>
                  <?php the_content(); ?>
                  <a href="#section-b" class="btn">Read More</a>
                </div>
            </div>

            </div>
          </div>
        </div>

    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
  <?php endif; ?>
</div>


你使用的是哪种滑块js？我试过使用owl转盘，但不知道如何使用WordPress。你能给我看一下owl转盘的html代码吗？或者你能推荐我的任何其他方式。。。？
<script>
  jQuery(document).ready(function() {
    var slider = jQuery('.posts-slider'); // The class name of the wrapper div

    slider.flickity({
      cellAlign: 'left',
      contain: true
    });
  });
</script>