Carousel Block

I couldn’t say how many times I’ve built a custom sliders or carousels. It seems to be one of the most requested and misused of all the elements of webpages. The earliest renditions were simple fade in and out of <divs>. At their core are a simple JavaScript method for pulling <div> elements from out of view into view. It becomes much trickier once you start considering accessibility, scalable views, and touch elements for mobile. There are slider libraries which bundle in every feature including the kitchen sink . I’ve found that by combining the Bootstrap Carousel element alongside of some CSS animations, it provides enough methods, events, and options to create a reliable feature rich slider. I’ve previously used to build WordPress related carousels with a custom post type and query those posts to create sliders. Sometimes, that can be overly confusing to an end user as to how those are being created and I want a way in which they can use the Gutenberg editor to create them and see them as they are in the editor before being published.

Considerations
  • configure carousel size, width, and height
  • set the captions and position them
  • set animation classes on each element
  • use other blocks or divs as carousel items
  • format background image height for slide consistency
  • change the slider animation type
Basic Markup for Carousel
<article class="alignfull" id="carousel">
  <div class="carousel-example">
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">  
        <div class="carousel-item active">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text style="text-anchor:middle;font-size:50px" x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text style="text-anchor:middle;font-size:50px" x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text style="text-anchor:middle;font-size:50px" x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>  
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </a>
    </div>
  </div>
</article>

Animate.CSS

I’ve added the animate.css library to the theme CSS so that it can be used.

References: