javascript - 根据可用图像添加、删除“Active”类引导轮播

问题描述

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

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

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

示例：如果我没有图像$image1，$image2则active必须在下一个中添加该类：第三个。

info：如果$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>

标签： javascriptjqueryhtmlbootstrap-4carousel

javascript - 根据可用图像添加、删除“Active”类引导轮播

问题描述

解决方案

推荐阅读