javascript - 根据可用镜像添加、删除 "Active"类 bootstrap carousel

Question

我有 5 个可从后端配置的图像 enable yes/no

在我的 slider 中，我想要如果我没有一些图像，我会删除该幻灯片，这对我来说没问题，遇到的问题是“事件”类，它必须出现在第一张幻灯片中。

我不知道如何管理此类以将其添加到第一张幻灯片 <div>可用。

示例:如果我没有 $image1 的图像, $image2 active必须在下一个:第三个中添加类。

信息:如果 $images变量如果为空，则返回 Null

active类添加在两个地方:

1. <li data-target="#carouselExampleIndicators" data-slide-to="0"

2. <div class="carousel-item img1

<div id="carouselExampleIndicators" class="banner carousel slide">
    <ol class="carousel-indicators">
        <?php if($image1) :?>
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> // Here class="active"
        <?php endif; ?>
        <?php if($image2) :?>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <?php endif; ?>
        <?php if($image3) :?>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        <?php endif; ?>
        <?php if($image4) :?>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        <?php endif; ?>
        <?php if($image5) :?>
            <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
        <?php endif; ?>
    </ol>
    <div class="carousel-inner">
        <?php if($image1) :?>
        <div class="carousel-item img1 active"> //here active
            <img class="d-block w-100" src="<?php echo $mediaUrl.'slider/'.$image1; ?>" alt="First slide">
        </div>
        <?php endif; ?>
        <?php if($image2) :?>
        <div class="carousel-item img2">
            <img class="d-block w-100" src="<?php echo $mediaUrl.'slider/'.$image2; ?>" alt="Second slide">
        </div>
        <?php endif; ?>
        <?php if($image3) :?>
        <div class="carousel-item img3">
            <img class="d-block w-100" src="<?php echo $mediaUrl.'slider/'.$image3; ?>" alt="Third slide">
        </div>
        <?php endif; ?>
        <?php if($image4) :?>
        <div class="carousel-item img4">
            <img class="d-block w-100" src="<?php echo $mediaUrl.'slider/'.$image4; ?>" alt="Third slide">
        </div>
        <?php endif; ?>
        <?php if($image5) :?>
        <div class="carousel-item img5">
            <img class="d-block w-100" src="<?php echo $mediaUrl.'slider/'.$image5; ?>" alt="Third slide">
        </div>
        <?php endif; ?>
    </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>

Answer 1

试试这个

$('.carousel-item').first().addClass('active')