html BootStrap - Carousel WP / Bootstrap（我们的团队/我们的服务...）

Posted 2021-05-11

 <style>
 
     /* Styling Carousel */

.carousel-control.left {
    left: -12px;
    background-image: none;
    background: none repeat scroll 0 0 #222222;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    height: 40px;
    width: 40px;
    margin-top: 30px;
    line-height: 28px;
}
.carousel-control.right {
    right: -12px !important;
    background-image: none;
    background: none repeat scroll 0 0 #222222;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    height: 40px;
    width: 40px;
    margin-top: 30px;
    line-height: 28px;
}
 
 </style>
 <?php 
  $i = 0 ;
  ?>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
	<?php while ( $pique_child_pages->have_posts() ) : $pique_child_pages->the_post(); ?>
  <?php 
  
  if($i == 0){
    echo '<div class="item active">';
  }
  else if (($i % 3) == 0){
    echo '<div class="item">';
    //echo '<div class="row">';
  }
      $i++ ;
  ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

			<?php
			if ( has_post_thumbnail() ) :
				the_post_thumbnail( 'pique-square' );
			endif;
			?>

			<?php the_title( '<h3>' , '</h3>' ); ?>

			<?php the_content(); ?>
		</article>
  <?php 
      if (($i % 3) == 0 || $i == $pique_child_pages->post_count ){
      echo "</div><!-- fermuture de custom class -->";
      //$i = 0 ;
    }
  ?>
	<?php endwhile; ?>
  </div> <!-- END carousel-inner -->
    <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div> <!--  myCarousel -->