javascript - 使用 jQuery 在 Bootstrap Carousel 中的同一张幻灯片上显示多个元素

Question

我试图在 Bootstrap 轮播内的同一张幻灯片上显示 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 片段到底在做什么，它与 child 和 sibling 有关。我了解伪元素 :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

鉴于您不受限于使用 Bootstrap ，请尝试 jCarousel .您可以使用 pagination plugin这允许你做类似的事情:

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

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

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