将引导转盘指示器与ACF插件集成 [英] Integrating Bootstrap Carousel Indicators with ACF Plugin

问题描述

我正在使用高级自定义字段WordPress插件为滑块创建各种幻灯片。若要显示滑块，我使用的是引导转盘。

功能正常的滑块主体。然而，我不知道如何循环、计算幻灯片数量以及如何将旋转指示器打印到每张幻灯片的页面上。

我当前在滑块顶部有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 -->

我需要找到一种方法，在滑块启动之前打开有序列表，并在它结束时关闭它。同时，我需要为每一张幻灯片回显它的li元素。

推荐答案

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

这篇关于将引导转盘指示器与ACF插件集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！