Question

我正在将一些html代码移植到php，其中一个脚本是此引导轮播，我将在其中将一系列图像解析为轮播。

在html上淡入淡出过渡很平滑

    <div class="carousel carousel-fade slide" data-ride="carousel" data-interval="5000">
      <div class="carousel-inner" style="overflow: visible;" >
        <div class="carousel-item position-absolute active"> 
          <img src="images/02.jpg" width="100%">
        </div>
        <div class="carousel-item position-absolute">
          <img src="images/03.jpg" width="100%">
        </div>
        <div class="carousel-item position-absolute" >
          <img src="images/04.jpg" width="100%">
        </div>
        <div class="carousel-item position-absolute">
          <img src="images/05.jpg" width="100%">
        </div>
      </div>
    </div>

但是，当我将其转换后，在最后一张幻灯片和第一张幻灯片之间出现了一个跳转，其中似乎没有出现褪色。


    <div class="carousel carousel-fade slide" data-ride="carousel" data-interval="5000">
      <div class="carousel-inner" style="overflow: visible;" >
<?php
// check if the repeater field has rows of data
if( have_rows('slider_image') ):
  $count = 1;
    // loop through the rows of data
    while ( have_rows('slider_image') ) : the_row();
    //if first image
    if( $count == 1 ) {
  ?>
        <div class="carousel-item item position-absolute active"> 
          <img src="<?php echo $image = get_sub_field('image'); ?>" width="100%" a>
        </div>
    <?php
    $count++;
    } else ?>
        <div class="carousel-item item position-absolute">
          <img src="<?php echo $image = get_sub_field('image'); ?>" width="100%">
        </div> 
    <?php 
    endwhile;
    else :
    // no rows found
    endif;
    ?>
      </div>
    </div>

我相信这可能是我已经隔离了第一张幻灯片并添加到活动课堂上的事实，但是在不干扰过渡的情况下，我还可以采用什么其他方法呢？

Bootstrap Carousel最后一张幻灯片未在php上制作动画

0 个答案: