CODEWITHSUNDEEP
javascriptjquerycsswordpresstwitter-bootstrap
Halnex
Halnex

Reputation: 4536

Display multiple items on the same slide in Bootstrap Carousal with jQuery

I'm trying to display 3 posts (from a Wordpress Custom Post Type) on the same slide inside a Bootstrap Carousel

I integrated the carousel into Wordpress and it's fetching and displaying the posts, one post per slide.

<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>

But when I add this jQuery snippet which came with the carousel, it starts displaying 3 posts per slide.

The problem is, it's cloning the posts with the clone() method in order to display multiple posts on the same slide. So when I'm on the first slide, I can see 3 items, let's say 1, 2 and 3

When I click on the second slide, I see 2, 3, and 4 when instead, it should be showing me 4, 5 and 6 on the second slide.

How can I fix this?

I don't quite understand what this jQuery snippet is exactly doing, it has something to do with childs and siblings. I understand the pseudo-element :first-child will fetch the first element of the whole bunch.

$('#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));
    }
});

Upvotes: 0

Views: 1096

Answers (1)

webnoob
webnoob

Reputation: 15934

Given you aren't tied down to using bootstrap, try jCarousel. You have the ability to use the pagination plugin which allows you to do something like:

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

This sets the page to be 3 items, when scrolling to the next page it will start at item number 4.

This shouldn't cause issues with the Wordpress layout as you can wrap all your markup in whatever tags / classes you need.

Upvotes: 2

Related Questions