carousel in wordpress theme is not showing the other posts -

i have basic bootstrap carousel put in wordpress theme. want carousel show 3 latest posts. tried doing using "posts_per_page=>3", if css gets jumbled , messy divs on place. because of i'm using "posts_per_page=>1" here code:

<!-- home carousel --> <div id="home-carousel" class="carousel carousel-home slide" data-ride="carousel" data-interval="5000">     <!-- wrapper 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>   

'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"> <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a> </div> </div> <?php $tmpx++; endwhile; wp_reset_postdata(); ?> </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>