Question

我可以从一些后端可配置的enable yes/no

配置5个图像

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

我不知道如何管理此类，以便在第一张幻灯片<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

试试这个

$（＆＃39; .carousel项＆＃39）。第一（）addClass（＆＃39;有源＆＃39）

Answer 2

。

$（ “转盘-内”）下（）addClass（ '激活'）;

根据可用图像添加，删除“Active”类引导程序轮播

2 个答案: