php 使用中继器领域的Boostrap转盘

Posted 2021-05-05

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <div class="carousel-inner" role="listbox">
        <?php if( get_field( 'repeater-field' ) ) : 
          $i = 0; while( has_sub_field( 'repeater-field' ) ): ?>
            <div class="item <?php if( $i==0 ): echo 'active'; endif; ?>">
              <!-- item content -->
            </div>
          <?php $i++; 
          endwhile; 
        endif; ?>
    </div>
    <ol class="carousel-indicators hidden-xs">
        <?php if( get_field( 'repeater-field' ) ) : 
          $ic = 0; while( has_sub_field( 'repeater-field' ) ):  ?>
            <li data-target="#carousel-example-generic" data-slide-to="<?php echo $ic; ?>" class="<?php if( $ic==0 ): echo 'active'; endif; ?>">
              <!-- indicator content, if needed -->
            </li>
          <?php $ic++; endwhile;  
        endif; ?>
    </ol>

    <!-- Controls -->
    <a class="left carousel-control hidden-xs" href="#carousel-example-generic" role="button" data-slide="prev">
        <i class="fa fa-angle-left" aria-hidden="true"></i>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control hidden-xs" href="#carousel-example-generic" role="button" data-slide="next">
        <i class="fa fa-angle-right" aria-hidden="true"></i>
        <span class="sr-only">Next</span>
    </a>
    
  </div>