Bootstrap Carousel ACF 中继器 - 箭头不起作用

Question

早上好，

我目前正在开发 understrap-child 主题，但我在使用 Wordpress 上的 Acf pro 插件将其制成中继器时遇到了 Bootstrap Carousel 的问题。 问题在于指示箭头不起作用。滑块完美地用作中继器，但右箭头 (carousel-control-next) 不起作用，只有左箭头允许我与滑块交互。

我想知道问题是否与中继器本身有关，或者我犯了一些我看不到的愚蠢错误！请帮我 这是我的代码：

<div class="container-fluid containerslider sliderdesktop container-home-sub ">



<div id="HomeCarouselIndicators" class="carousel slide" data-ride="carousel">
  <!--indicators-->
  <?php if( have_rows('slider') ): $i = 0; ?>
    <ol class="carousel-indicators">
  <?php while ( have_rows('slider') ): the_row(); ?>
      <li data-target="#HomeCarouselIndicators" data-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>"></li>


      <?php $i++; endwhile; ?>
    </ol>
    <?php endif; ?>
    <!--end of indicators-->


    <div  class="carousel-inner" role="listbox">

    <?php // check if the repeater field has rows of data

$count = 0;

if( have_rows('slider') ){
    //loop through
    while ( have_rows('slider') ){
    //define the row
    the_row();
       ?> 



      <!-- Slide One - Set the background image for this slide in the line below -->
      <div class="carousel-item subheader-carousel  <?php if ($count==0) {echo "active";} ?>" style="background-image: url('<?php the_sub_field('slider_background'); ?>')" >
        <div class="">

        </div>
      </div>

      <a class="carousel-control-prev" href="#HomeCarouselIndicators" 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="#HomeCarouselIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

      <?php
            $count=$count+1;
            }
            }
            ?> 




    </div><!--end of carousel inner-->


  </div><!--end of homecarouselindicators-->

  </div><!--end container slider-->

Answer 1

一目了然，您的控件位于轮播内部。

https://getbootstrap.com/docs/4.0/components/carousel/

显示在 carousel-inner 外部但在 carousel 内部的控件。