Explore web accessibility

Carousels

Sample code:

React JSX

  <div
    id="demo"
    className="carousel slide"
    data-ride="carousel"
    data-interval={slideInterval}
  >
    <a className="carousel-control-prev" href="#demo" data-slide="prev" aria-label="previous slide">
      <i className="fa fa-chevron-circle-left fa-lg" aria-hidden></i>
    </a>

    <div className="carousel-inner">
      {imageDetails.map((image, index) => {
        return (
          <div
            className={"carousel-item "}
            key={image.id}
          >
            <img src={image.src} alt={image.alt || ''} />
          </div>
        );
      })}
    </div>
    <a className="carousel-control-next" href="#demo" data-slide="next" aria-label="next slide">
      <i className="fa fa-chevron-circle-right fa-lg" aria-hidden></i>
    </a>
  </div>

JavaScript (to set slide interval for animation)

  const slideInterval = !matchMedia("(prefers-reduced-motion)").matches && 3000;