carousel in wordpress theme is not showing the other posts

  • Resolved pamsillah

    (@pamsillah)


    8 years, 7 months ago

    0
    down vote
    favorite

    I have a basic bootstrap carousel that I put in my WordPress theme. I want the carousel to show the three latest posts. I tried doing this by using “posts_per_page=>3”, but if i do that then my CSS gets all jumbled and messy with divs all over the place. Because of that I’m using “posts_per_page=>1” Here is my code:

    <!-- Home Carousel -->
<div id="home-carousel" class="carousel carousel-home slide" data-ride="carousel" data-interval="5000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" style="margin-top:0px; background-color:transparent; height:30em;">
        <div class="active item">
                    <?php the_post_thumbnail('large');?>
                    <div class="carousel-caption">
                        <a href="<?php  the_permalink(); ?>"> <h1><?php the_title();?></h1></a>

                    <?php
                           $the_query = new WP_Query(array(
                             'category_name' => 'Featured',
                            'posts_per_page' => 1
                            ));
                           while ( $the_query->have_posts() ) :
                           $the_query->the_post();
                          ?>
                    </div>
                <?php
                   endwhile;
                   wp_reset_postdata();
                ?>
        </div>  

        <div class="item">
                    <?php the_post_thumbnail('large');?>
                     <div class="carousel-caption">
                      <a href ="<?php  the_permalink(); ?>"><h1><?php the_title();?></h1></a>
                      </div>

                        <?php
                         wp_reset_postdata();
                        ?>
        </div>
    </div>

    <!-- Controls -->
        <a class="left carousel-control" href="#home-carousel" data-slide="prev">
            <span>
                <i class="fa fa-chevron-left"></i>
            </span>
        </a>
        <a class="right carousel-control" href="#home-carousel" data-slide="next">
            <span>
                <i class="fa fa-chevron-right"></i>
            </span>
        </a>
    <!-- END Controls -->

</div>
Viewing 1 replies (of 1 total)
  • Thread Starter pamsillah

    (@pamsillah)

    <!– Home Carousel –>
    <div id=”home-carousel” class=”carousel carousel-home slide” data-ride=”carousel” data-interval=”5000″>
    <!– Wrapper for slides –>
    <div class=”carousel-inner” style=”margin-top:0px; background-color:transparent; height:30em;”>
    <?php
    $tmpX = 0;
    $the_query = new WP_Query(array(
    ‘category_name’ => ‘Featured’,
    ‘posts_per_page’ => 3
    ));
    while ($the_query->have_posts()) :
    $the_query->the_post();
    ?>

    <div class=”<?php echo($tmpX == 0 ? ‘active’ : ”) ?> item”>
    <?php the_post_thumbnail(‘large’); ?>
    <div class=”carousel-caption”>
    “><h1><?php the_title(); ?></h1>
    </div>
    </div>
    <?php
    $tmpX++;
    endwhile;
    wp_reset_postdata();
    ?>
    </div>

    <!– Controls –>
    <span><i class=”fa fa-chevron-left”></i></span>
    <span><i class=”fa fa-chevron-right”></i></span>
    <!– END Controls –>

    </div>

Viewing 1 replies (of 1 total)
  • The topic ‘carousel in wordpress theme is not showing the other posts’ is closed to new replies.