Possible Improvements to Carousel Features

Created by: planetoftheweb

The carousel is one of my favorite features, but there's a few things that I've built to make them easier to use over time. I think some of these could be added to Bootstrap or at list be listed somewhere as examples.

Demo: https://codepen.io/planetoftheweb/pen/24e29886a4614c7916aabe4ad9bd3d13

---

Buttons

When I want to use buttons, I just want both of them to appear and it's always the same HTML that has to be added to the page.

I automate their creation by using a bit of javascript.

const insertButtons = document.querySelectorAll('.carousel-buttons')

insertButtons.forEach( buttonIndicators => {
  const id = buttonIndicators.parentNode.id;
  if (id !==null) {
    buttonIndicators.innerHTML = `
    <button class="carousel-control-prev" type="button" data-bs-target="#${id}" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#${id}" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
    ` 
  }
});

Then in the HTML, all I have to do if I want buttons is add <div class="carousel-buttons"></div>

---

Indicators

Indicators are even more cumbersome to put together because they require an individual id for each indicator with the zero indexed number of each image. Here's what I'm using.

const insertIndicators = document.querySelectorAll('.carousel-indicators')

insertIndicators.forEach( carouselIndicators => {
  const id = carouselIndicators.parentNode.id;
  if (id !==null) {
    const carouselItems = carouselIndicators.parentNode.querySelectorAll('.carousel-item');
    carouselItems.forEach((item, index) => {
      let el = document.createElement('button');
      el.type="button";
      el.dataset.bsTarget=`#${id}`;
      el.dataset.bsSlideTo=`${index}`;
      el.ariaLabel=`Slide ${index}`;
      if (index == 0) {
        el.className="active";
        el.ariaCurrent="true";
      }
      carouselIndicators.appendChild(el); 
    });    
  }
})

Then all I have to do to add them to a carousel is add <div class="carousel-indicators"></div>. That helps me write a lot less code for each carousel and it's code that focuses on the content, not the interface, so for a large site, this also has the potential of making the code cleaner.

---

Background Cover

For carousel images, I'm using this CSS now. Assuming you have a carousel with an ID of carouselHero.

#carouselHero .carousel-item img {  
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  height:50vh;
}

Then I just change the height value depending on the size of the carouse. I think this works more like some of the CSS background features and more proportionately fills the image in the space allotted for the carousel.

---

Gradient Overlay

I often use this to generate a gradient overlay, just in case the images are too light for the text of the overlays. There could be a way to make this easier for the user to generate from some CSS classes, giving the text more contrast so it can more easily be read. Assuming you have a carousel with an ID of carouselHero.

#carouselHero .carousel-item:before {
  content: '';
  display: block;
  position: absolute;
  background-image: 
    linear-gradient(
      to bottom,
      transparent,
      rgba(0, 0, 0, .5)
    );
  width: 100vw;
  top: 0;
  height: 50vh;
}

---

Content Carousel

I've also created a carousel that easily lets you shift the headline and body copy of the content with the arrows and indicators by just adding some CSS (see the sidebar carousel further down and to the right of the page in the demo. Assuming you have a carousel with an ID of carouselSidebar.

#carouselSidebar .carousel-item img {
  height:210px;
}

#carouselSidebar .carousel-control-prev,
#carouselSidebar  .carousel-control-next {
  align-items: flex-start;
  top: 80px;
}

#carouselSidebar .carousel-indicators {
  align-items: flex-start;
  top: 180px;
  height: 10px;
  margin: 0; 
}

Although my solution for this is a bit less elegant, I think it's got a lot of potential with some simple lines of css.