Question

我试图在Bootstrap Carousel内的同一张幻灯片上显示3个帖子（来自Wordpress自定义帖子类型）

我将旋转木马整合到Wordpress中，它可以抓取并显示帖子，每张幻灯片一个帖子。

<div id="myCarousel" class="carousel fdi-Carousel slide">
        <!-- Carousel items -->

        <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
            <div class="carousel-inner onebyone-carosel">
                <?php
                $args = array(
                    'post_type' => 'services',
                    'post_status' => 'publish',
                    'posts_per_page' => -1
                );
                $services_loop = new WP_Query( $args );
                $services_count = wp_count_posts('services');
                ?>

                <?php

                if ( $services_loop->have_posts() ) :
                    while ( $services_loop->have_posts() ) : $services_loop->the_post();

                        $service_icon = get_field('service_icon');

                        ?>
                        <div class="item <?php if( $services_loop->current_post == 0 && !is_paged() ) { echo 'active'; } ?>">
                            <div class="col-xs-12 col-sm-6 col-lg-4">
                                <div class="box">
                                    <div class="icon">
                                        <div class="image">
                                            <i class="<?php echo $service_icon; ?>"></i>
                                        </div>
                                        <div class="info">
                                            <h3 class="title"><?php the_title(); ?></h3>
                                            <p>
                                                <?php the_excerpt(); ?>
                                            </p>
                                            <div class="more">
                                                <a href="#" title="Title Link">
                                                    <i class="fa fa-plus-circle fa-3x"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="space"></div>
                                </div>
                            </div>
                        </div>
                        <?php
                    endwhile;
                    wp_reset_postdata();
                endif; ?>
            </div>

            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <?php for ( $i = 1; $i < $services_count->publish; $i++ ) : ?>
                    <li data-target="#myCarousel" data-slide-to="<?= $i ?>"></li>
                <?php endfor; ?>
            </ol>
        </div>

        <!--/carousel-inner-->
    </div>

但是当我添加旋转木马附带的这个jQuery片段时，每个幻灯片开始显示3个帖子。

问题是，它使用clone()方法克隆帖子，以便在同一张幻灯片上显示多个帖子。因此，当我在第一张幻灯片上时，我可以看到3个项目，让我们说1，2和3

当我点击第二张幻灯片时，我会看到2，3和4，而是应该向我显示4，5和第二张幻灯片上的6。

我该如何解决这个问题？

我不太明白这个jQuery片段究竟在做什么，它与孩子和兄弟姐妹有关。我理解伪元素:first-child将获取整个元素的第一个元素。

$('#myCarousel').carousel({
    interval: 10000
})
$('.fdi-Carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

Answer 1

鉴于您没有使用引导程序，请尝试jCarousel。您可以使用pagination plugin来执行以下操作：

$('.jcarousel-pagination').jcarouselPagination({
    'perPage': 3
});

这会将页面设置为3个项目，当滚动到下一个页面时，它将从项目编号4开始。

这不应该导致Wordpress布局出现问题，因为您可以将所有标记包装在您需要的任何标记/类中。

使用jQuery在Bootstrap Carousal的同一幻灯片上显示多个项目

1 个答案: