html 从ACF数据拉出的Bootstrap Carousel

Posted 2021-05-11

<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="8000" id="bs-home-carousel">
  <!-- Overlay -->
  <div class="overlay"></div>
  
  <!--<ol class="carousel-indicators">
   <?php 
   $i=0;
   while( have_rows('home_carousel') ): the_row();
   if ($i == 0) {
    echo '<li data-target="#bs-home-carousel" data-slide-to="0" class="active"></li>';
  } else {
    echo '<li data-target="#bs-home-carousel" data-slide-to="'.$i.'"></li>';
  }
  $i++;
  endwhile; ?>
</ol>-->

<!-- Wrapper for slides -->
<div class="carousel-inner">
 <?php 
 $z = 0;
 while( have_rows('home_carousel') ): the_row();
 $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>

 <div class="item slides <?php if ($z==0) { echo 'active';} ?>">

 <img src="<?php the_sub_field('image'); ?>" style="" />

  <div class="home-carousel-caption">
    <hgroup>
    <h2 class="line-one" style="background: <?php the_sub_field('color-picker'); ?>"><?php the_sub_field('line-one');?></h2><br />        
      <h2 class="line-two" style="background: <?php the_sub_field('color-picker'); ?>"><?php the_sub_field('line-two');?></h2>
    </hgroup>
  </div>
</div>
<?php 
$z++;
endwhile; ?>    
</div>
<!-- Controls -->
  <a class="left carousel-control" href="#bs-home-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#bs-home-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>