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

  • 1
    What happens if you set posts per page to a very high number instead of -1? – Milo Apr 17 '17 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 '17 at 17:03
  • 'offset' does not work with 'posts_per_page' => -1 - codex.wordpress.org/Class_Reference/… – Michael Apr 17 '17 at 17:33
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>
  • You may accept the working answer and make it useful for others. – hkchakladar Apr 18 '17 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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