0

I want to use the carousel from Bootstrap 4 for showing dynamic content. The first item of the carousel needs the css class ".active". Actually this should be added directly in the HTML but this is a bit stricky with the my output of dynamic content. Therefore I want to add it through JavaScript and I found this topic: Appending a class to the first div of a set of dynamically created divs

The solution is to add the following JavaScript before the closing body-tag:

$(".carousel-item:first").addClass('active');

That works so far but only if you have one carousel on your page. If you have more than, this only works for the first carousel in the code.

What I did now is to add a custom class (carousel1, carousel2, carousel3,...) to each carousel on the page and add one line for each carousel to my JavaScript file like:

$(".carousel-item.carousel1:first").addClass('active');
$(".carousel-item.carousel2:first").addClass('active');
$(".carousel-item.carousel3:first").addClass('active');

BUT: To be more flexible, is there a JavaScript solution as well that it works more generic and without a custom css class per carousel?

Thanks for any hints and tips in advance.

Bastian

bastians
  • 85
  • 9
  • take a look at https://stackoverflow.com/questions/4161869/jquery-how-to-select-all-the-class-elements-start-with-text – mastaH Oct 30 '17 at 22:05
  • Hmm, I can reduce my JS then, but I need a unique css class anyway for each carousel I have, correct? – bastians Oct 30 '17 at 22:09

2 Answers2

1

You need to loop through the carousels on the page and from within the loop, target each carousel's first .carousel-item.

HTML grabbed from the BS4 docs and inserted 3 times to mimic an actual page. CSS is just to call out the 'active' items since the images are obviously not going to work here on SO.

$(document).ready(function(){
  $('.carousel').each(function(){
    $(this).find('.carousel-item').eq(0).addClass('active');
  });
});
/* demo only */
.carousel {
  border-bottom: 1px solid #ddd;
  margin-bottom : 2em;
  padding-bottom: 2em;
 }
.carousel-item.active img {
  color: green;
  font-size: 3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>
Will
  • 4,075
  • 1
  • 17
  • 28
-1

Your carousel should have differents parents, like this you can use first-of-type instead.

$(".carousel-item:first-of-type").addClass('active');
Djory Krache
  • 347
  • 4
  • 9