Add extra CSS classes for OWL carousel first and last active item – and other goodies

As probably all the web devs know, one of the best image sliders or carousels is the OWL carousel.

It is fully open source (free as in beer), it has very well-made documentation and is supported by a huge community. Not to mention, for WordPress lovers it has a huge amount of implementations as WordPress OWL carousel plugin.

Still, even though it has tons of options, there are some custom actions that it doesn’t do out of the box. One of them I had to do recently is to add a special CSS or animation effect to the first slide of the carousel and I found no way to do that by default.

So I researched and I came up with this idea: I need to capture the active slides and dynamically add a new class to the first one of them.

A very basic html structure generated by the OWL slider would be:

<div class="owl-carousel owl-theme">
  <div class="owl-item"> Your Content </div>
  <div class="owl-item"> Your Content </div>
  <div class="owl-item active"> Your Content </div>
  <div class="owl-item active"> Your Content </div>
  <div class="owl-item active"> Your Content </div>
  <div class="owl-item"> Your Content </div>
  <div class="owl-item"> Your Content </div>
</div>

So as you see the “active” classes are dynamically changed for the slides currently in “view”, depending on how many there are set in the initial JS settings.

So, in order for us to attach the desired classes, we need to tap into the “owl-carousel” DOM structure and manipulate it also dynamically by using the “translated.owl.carousel” native event of our OWL carousel.

An example of how that can be done is:

 var owlsld = jQuery(".owl-carousel");
  function owlsldClasses() {
    owlsld.each(function () {
      var total = jQuery(this).find(".owl-item.active").length;
      jQuery(this).find(".owl-item").removeClass("firstactiveitem");
      jQuery(this).find(".owl-item").removeClass("lastactiveitem");
      jQuery(this)
        .find(".owl-item.active")
        .each(function (index) {
          if (index === 0) {
            jQuery(this).addClass("firstactiveitem");
          }
          if (index === total - 1 && total > 1) {
            jQuery(this).addClass("lastactiveitem");
          }
        });
    });
  }
  // owlsldClasses();
  owlsld.on("translated.owl.carousel", function (event) {
    owlsldClasses();
  });

As you can see, after that the HTML structure will have two new classes attached to the first and last active slides:

<div class="owl-carousel owl-theme">
  <div class="owl-item"> Your Content </div>
  <div class="owl-item"> Your Content </div>
  <div class="owl-item active firstactiveitem"> Your Content </div>
  <div class="owl-item active"> Your Content </div>
  <div class="owl-item active lastactiveitem"> Your Content </div>
  <div class="owl-item"> Your Content </div>
  <div class="owl-item"> Your Content </div>
</div>

Then you can add the desired look to that first slide with CSS:

.firstactiveitem{
  border: thin solid #ddd;
  background: #f0f0f0;
  border-radius: 10px;
}