2017-10-29 106 views
0

我使用高级自定义字段Wordpress插件为滑块创建各种幻灯片。要显示滑块,我使用Bootstraps Carousel。将引导程序轮播指示符与ACF插件集成

滑块的主体如果功能正常。但是,我不知道如何循环播放,计算幻灯片并在每张幻灯片的页面上打印轮播指示器。

我目前有3个硬编码在滑块的顶部。

<ul id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
     </ol> 

     <li class="carousel-inner"> 

     <?php 

     $c = 0; 
     $class = ''; 

     while (have_rows('slide')) : the_row(); 

      $c++; 

      if ($c == 1){ $class = ' active';} 
      else{ $class=''; } ?> 

      <?php 

      $image = get_sub_field('image'); ?> 

      <div class="carousel-item <?php echo $class; ?> image" style="background: url('<?php echo $image; ?>') no-repeat; background-size: cover; background-position: left center;"> 

      </div> 

      <?php 

     endwhile; ?> 

     </li> <!-- end li.image --> 

    </ul> <!-- end ul --> 

我需要找到一种方法来打开滑盖之前开始有序列表并关闭它何时结束。同时,我需要为每张幻灯片回应它的李元素。

回答

1

如果你的HTML是这样的:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active"> 
      <img class="d-block img-fluid" src="..." alt="First slide"> 
     </div> 
     <div class="carousel-item"> 
      <img class="d-block img-fluid" src="..." alt="Second slide"> 
     </div> 
     <div class="carousel-item"> 
      <img class="d-block img-fluid" src="..." alt="Third slide"> 
     </div> 
     </div> 
     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 

然后用这个PHP代码:

<?php 
$sliders = get_field('slide'); 
if($sliders){ ?> 
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
<ol class="carousel-indicators"> 
<?php $isActive =''; 
foreach($sliders as $key=>$slider){ 
if($key==0){ 
$isActive = 'active'; 
} 
echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$key.'" class="'.$isActive.'"></li>'; 

} ?> 
    </ol> 
<div class="carousel-inner" role="listbox"> 
<?php 
$activeSlide =''; 
foreach($sliders as $key=>$sliderimg){ 
if($key==0){ 
$activeSlide = 'active'; 
} 
    echo '<div class="carousel-item '.$activeSlide.'">'; 
     echo '<img class="d-block img-fluid" src="'.$sliderimg['image']." alt="First slide">'; 
    echo '</div>'; 

?> 
</div> 

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 

<?php } ?>