• 0

    I am trying to build a carousel from scratch, similar to this one:

    I have managed to get the code to call posts but currently it shows the two items together rather than separate / in a row…. also how do I get the indicating dots to count how many posts have been called?

    $qargs = array(
    ‘no_found_rows’ => true,
    ‘ignore_sticky_posts’ => true,
    );
    $the_query = new WP_Query( $qargs );
    $image= the_post_thumbnail( ‘large’ )
    ?>
    <?php if ( $the_query->have_posts() ) : ?>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-sm-12″>
    <div id=”firstcarousel” class=”carousel slide” data-ride=”carousel”>
    <!– indicators dot nav –>
    <?php
    // Carousel items:

    $counter = 1;
    foreach($images->results() as $image){?>

    <div class=”item<?php if($counter <= 1){echo ” active”; } ?>”>
    url; ?>” alt=”<?php echo $image->description; ?>”>
    </div>
    <?php
    $counter++;
    }
    ?> <!– Indicators –>

      <?php

      $counter = 1;
      foreach($images->results() as $image){
      ?>
      <li data-target=”#firstcarousel” data-slide-to=”<?= $counter ?>” <?php if ($counter==1){ ?>class=”active”<?php } ?>>

    <?php
    $counter++;
    }?>
    <div class=”carousel-inner” role: “listbox”>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post();?>
    <?php $active_class = ( 0 === $the_query->current_post ) ? ‘ active’: ”; ?>
    <div class=”carousel item <?php echo esc_attr( $active_class ); ?>”>
    <?php the_post_thumbnail( ‘large’ ); ?>
    <div class=”carousel-caption”>
    <h3 ><?php the_title();?></h3>
    <p><?php the_excerpt();?></p>
    </div>
    </div>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    </div><!– .carousel-inner –>

    <span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
    <span class=”sr-only”> Previous</span>


    <span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
    <span class=”sr-only”> Next</span>

    </div>
    </div>
    <?php endif; ?>`
    `

    • This topic was modified 2 years, 10 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter littlebear211

    (@littlebear211)

    not sure why the code messed and can’t see a way to edit: code

    $qargs = array(
    ‘no_found_rows’ => true,
    ‘ignore_sticky_posts’ => true,
    );
    $the_query = new WP_Query( $qargs );
    $image= the_post_thumbnail( ‘large’ )
    ?>
    <?php if ( $the_query->have_posts() ) : ?>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-sm-12″>
    <div id=”firstcarousel” class=”carousel slide” data-ride=”carousel”>
    <!– indicators dot nav –>
    <?php
    // Carousel items:
    
    $counter = 1;
    foreach($images->results() as $image){?>
    
    <div class=”item<?php if($counter <= 1){echo ” active”; } ?>”>
    url; ?>” alt=”<?php echo $image->description; ?>”>
    </div>
    <?php
    $counter++;
    }
    ?> <!– Indicators –>
    
    <?php
    $counter = 1;
    foreach($images->results() as $image){
    ?>
    <li data-target=”#firstcarousel” data-slide-to=”<?= $counter ?>” <?php if ($counter==1){ ?>class=”active”<?php } ?>>
    
    <?php
    $counter++;
    }?>
    <div class=”carousel-inner” role: “listbox”>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post();?>
    <?php $active_class = ( 0 === $the_query->current_post ) ? ‘ active’: ”; ?>
    <div class=”carousel item <?php echo esc_attr( $active_class ); ?>”>
    <?php the_post_thumbnail( ‘large’ ); ?>
    <div class=”carousel-caption”>
    <h3 ><?php the_title();?></h3>
    <p><?php the_excerpt();?></p>
    </div>
    </div>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    </div><!– .carousel-inner –>
    
    <span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
    <span class=”sr-only”> Previous</span>
    
    <span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
    <span class=”sr-only”> Next</span>
    
    </div>
    </div>
    <?php endif; ?>
Viewing 1 replies (of 1 total)
  • The topic ‘PhP / bootstrap carousel to show more images’ is closed to new replies.