Multiple image slider at one page

enter image description here

<div class="images-slider">
        <?php
          $query = new WP_Query( array( 'post_type' => 'testimonial' , 'posts_per_page' => 10,) );?>
          <?php if ( $query->have_posts() ) : ?>
            <?php while ( $query->have_posts() ) : $query->the_post(); ?> 
              <div class="testimonials-carousel-contents"><?php echo get_the_post_thumbnail();?></div>
            <?php endwhile; wp_reset_postdata(); ?>
          <?php endif; 

        ?>
      </div>

      <div class="testimonials-box">
        <div class="testimonials-slider">
        <?php if ( $query->have_posts() ) : ?>
          <?php while ( $query->have_posts() ) : $query->the_post(); ?> 
          <div class="testimonials-carousel-content"><p><?php the_content()  ;?><br><?php the_title();?><br></p></div>
            <?php endwhile; wp_reset_postdata(); ?>
          </div>
         <?php else : ?>
        <?php endif; ?> 
      </div>

I have to use bxslider twice on content inside div class images-slider I want 10 images to come inside slider and on second div class testimonials-box I want it to display content one at time the second slider is working fine but first one is displaying only one image please help me how to solve this my script is given below

<script src="http://yourjavascript.com/13912425571/jquery-bxslider-min.js"></script>
<script type="text/javascript">
jQuery('.testimonials-slider').bxSlider({
  slideWidth: 800,
  minSlides: 1,
  maxSlides: 1,
  slideMargin: 32,
  auto: true,
  autoControls: true
});
jQuery('.images-slider').bxSlider({
  slideWidth: 800,
  minSlides: 1,
  maxSlides: 1,
  slideMargin: 32,
  auto: true,
  autoControls: true
});
</script>

1 answer

  • answered 2018-07-11 06:13 raju_eww

    You have to write query above both sliders div which are images-slider and testimonials-slider.Use below code and after first loop of query use rewind_posts($query);

    <?php
              $query = new WP_Query( array( 'post_type' => 'testimonial' , 'posts_per_page' => 10,) )?>
        <div class="images-slider">
              <?php if ( $query->have_posts() ) : ?>
                <?php while ( $query->have_posts() ) : $query->the_post(); ?> 
                  <div class="testimonials-carousel-contents"><?php echo get_the_post_thumbnail();?></div>
                <?php endwhile; ?>
              <?php endif;  ?>
    <?php rewind_posts($query); ?>
          </div>
          <div class="testimonials-box">
            <div class="testimonials-slider">
            <?php if ( $query->have_posts() ) : ?>
              <?php while ( $query->have_posts() ) : $query->the_post(); ?> 
              <div class="testimonials-carousel-content"><p><?php the_content()  ;?><br><?php the_title();?><br></p></div>
                <?php endwhile; ?>
              </div>
             <?php else : ?>
            <?php endif; ?> 
          </div>