Question

我使用高级自定义字段Wordpress插件为滑块创建各种幻灯片。要显示我正在使用Bootstraps Carousel的滑块。

如果功能正常，滑块的主体。但是，我不知道如何循环，计算幻灯片并将旋转木马指示器打印到每张幻灯片的页面。

我目前在滑块顶部有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元素。

Answer 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 } ?>

Answer 2

<section id="banner">

                <?php if( have_rows('slides') ) { ?>

                <?php
                    $num = 0;
                    $active = 'active';
                ?>

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

                    <ol class="carousel-indicators">

                        <?php while( have_rows('slides') ) : the_row() ; ?>

                        <li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $num; ?>" class="<?php echo $active; ?>"></li>

                        <?php 
                            $num++;
                            $active = '';
                        ?>

                        <?php endwhile; ?>

                    </ol>

                    <div class="carousel-inner">

                        <?php $active = 'active'; ?>

                        <?php while( have_rows('slides') ) : the_row() ;

                            $image      = get_sub_field('image');
                            $mainText   = get_sub_field('main_text');
                            $subText    = get_sub_field('sub_text');

                        ?>

                        <div class="carousel-item <?php echo $active; ?>">
                            <img class="d-block w-100" src="<?php echo $image['url'];  ?>" alt="<?php echo $image['alt'];  ?>">
                            <div class="carousel-caption d-none d-md-block">
                                <h5><?php echo $mainText; ?></h5>
                                <p><?php echo $subText; ?></p>
                            </div>
                        </div>

                        <?php $active = ''; ?>

                        <?php endwhile; ?>


                    </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  } ?>

            </section>

将Bootstrap Carousel指标与ACF插件集成

2 个答案: