CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4carousel
prc
prc

Reputation: 187

Add, remove "Active" class bootstrap carousel according to the available images

I have 5 images configurable from some back-end configurable enable yes/no

In my slider i want If I haven't some image, I remove that slide, this is Ok for me, the problem that encountered is with the "active" class it must be present in the first slide.

I don't know how to manage this class to add it in the first slide <div> available.

Example : if I haven't no image for the $image1, $image2 the active class must be added in the next one : the third.

info :if the $images varibles if they are empty, it returns Null

The active class is added in two places:

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>

Upvotes: 1

Views: 4138

Answers (2)

mooga
mooga

Reputation: 3317

$(".carousel-inner").next().addClass('active');

Upvotes: 0

Taylor Rahul
Taylor Rahul

Reputation: 729

Try this

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

Upvotes: 3

Related Questions