在WP中打印帖子类别缩略图到旋转木马的div

Question

我正在打印我的帖子类别缩略图内容 - 并输出;但是它的长度确定为div一个overflow:scroll，确定我可以WP并且我的帖子基本水平滚动（缩略图）但我尝试将<li>类别的帖子内容显示在轮播中，如Demo所示。我的问题在于如何将我的帖子内容（拇指）打印在单独的 <div class="feat_wrap_app"> <div class="viewport"> <div class="overview"> <ul class="list-unstyled"> <?php $buy_featurepost_category_id = get_cat_ID('buy_featurepost'); query_posts('post_type=mobile-experience&category_name=buy&cat=-'.$buy_featurepost_category_id.'&posts_per_page=-1'); //query_posts('post_type=mobile-experience&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <li class="media"> <a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal"> <?php echo get_small_thumbnail_post('experienceIcon'); ?> </a> <!-- <div class="media-body"> <h4 class="media-heading"><a href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal"><?php the_title(); ?></a></h4> <p><a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">Learn More</a></p> </div> --> </li> <?php endwhile; ?> <?php wp_reset_query(); ?> </ul> </div> </div> </div> </div> </div><!-- // related experiences dynamic app scroll --> </div> 标签中，因为轮播要求滚动到的部分。基本上我有以下4个系列，根据类别ID输出一大堆我的帖子内容缩略图。

                                                                              

{{1}}

Answer 1

使用数组并遍历此数组以创建导航

根据您的演示：

    <h1>Swipe 2</h1>

<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
    <div class='swipe-wrap'>

        <?php
        $buy_featurepost_category_id = get_cat_ID('buy_featurepost');
        $carouselItems = array();
        $postIndex = 0;
        $nbPostPerSlide = 6;
        query_posts('post_type=mobile-experience&category_name=buy&cat=-'.$buy_featurepost_category_id.'&posts_per_page=-1');
        //query_posts('post_type=mobile-experience&posts_per_page=-1');


        if ( have_posts() ) while ( have_posts() ) : the_post();
            $postIndex ++;
            $carouselItems[] = $post->ID;
            ?>

            <?php
            /**
             * open the div slide
             */
            ?>
            <?php if($postIndex === 1):?>
                <div>
            <?php endif; ?>

                <a class="pull-left" href="<?php the_permalink(); ?>" data-toggle="modal" data-target="#myModal">
                    <?php
                    echo get_small_thumbnail_post('experienceIcon');
                    ?>
                </a>

            <?php
            /**
             * close the div slide when reaching $nbPostPerSlide
             */
            ?>
            <?php if($postIndex >= $nbPostPerSlide): $postIndex = 0; ?>
                </div>
            <?php endif; ?>

        <?php endwhile; ?>
        <?php wp_reset_query(); ?>

        <?php
        /**
         * close the div after the loop
         */
        ?>
        <?php if($postIndex && $postIndex < $nbPostPerSlide): ?>
            </div>
        <?php endif; ?>

    </div>
</div>


<nav>
    <ul id="nav">
        <?php foreach($carouselItems as $index => $item): ?>
            <li><?php echo $index; ?></li>
        <?php endforeach; ?>
    </ul>
</nav>

<div style='text-align:center;padding-top:20px;'>

    <button onclick='mySwipe.prev()'>prev</button>
    <button onclick='mySwipe.next()'>next</button>

</div>