將引導程序輪播指示符與ACF插件集成

我使用高級自定義字段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 -->

我需要找到一種方法來打開滑蓋之前開始有序列表並關閉它何時結束。同時，我需要爲每張幻燈片迴應它的李元素。

來源

2017-10-29 Brett Golding

如果你的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 } ?>

來源

2017-10-30 15:01:30 Balwant

將引導程序輪播指示符與ACF插件集成

回答

相關問題