0

i'm new at wordpress development and i created custom post type to include in a Bootstrap carousel. It works but is repeating my first slide. How can i prevent this?

Here's my code:

<section role="banners-wrapper" class="row">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <?php $the_query = new WP_Query(array(
            'post_type' => 'Banners', 
            'posts_per_page' => 1 
        ));
        while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="carousel-item active">
            <img class="img-fluid" src="<?php the_field('banner-image'); ?>">
        </div>
        <?php endwhile; wp_reset_postdata(); ?>
        <?php $the_query = new WP_Query(array(
            'post_type' => 'Banners', 
            'posts_per_page' => -1, 
            'offset' => 1 
            ));
        while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="carousel-item">
            <img class="img-fluid" src="<?php the_field('banner-image'); ?>">
        </div>
        <?php endwhile; ?>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</section>

Any thoughts? Best regards

3
  • 1
    What happens if you set posts per page to a very high number instead of -1?
    – Milo
    Apr 17, 2017 at 16:58
  • 1
    Try putting your numbers in single quotes. 'posts_per_page' => '1'? But why are you doing this in 2 loops?
    – rudtek
    Apr 17, 2017 at 17:03
  • 'offset' does not work with 'posts_per_page' => -1 - codex.wordpress.org/Class_Reference/…
    – Michael
    Apr 17, 2017 at 17:33

1 Answer 1

0

As mentioned in comment by @Michael,

offset does not work with 'posts_per_page' => -1

You can possibly use increment to make first slide as active, in a single loop.

Use this

<div class="carousel-inner" role="listbox">
    <?php $the_query = new WP_Query(array(
        'post_type' => 'Banners', 
        'posts_per_page' => -1 
    ));
    $i = 0;
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="carousel-item <?php if($i == 0) { echo 'active'; } ?>">
        <img class="img-fluid" src="<?php the_field('banner-image'); ?>">
    </div>
    <?php $i++; ?>
    <?php endwhile; wp_reset_postdata(); ?>
</div>
1
  • You may accept the working answer and make it useful for others. Apr 18, 2017 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.