Tailwind Elements - Trouble with Carousel

Get Help and Help Others
1

I’m trying to use tailwind elements to make a Carousel, according to the docs. I’ve implemented it in a React component, however I’m having issues, as it’s not functional. It just shows whatever child has the className “active”, but neither the buttons nor indicators work, nor does the auto-cycle.

Here’s my code:

import React, { useRef } from 'react';
interface CarouselProps {
  children: React.ReactNode[];
  className?: string;
  id?: string;
}

function genRandomId() {
  const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
  const uniqueId = randLetter + Date.now();
  return 'carousel' + uniqueId;
}

const Carousel: React.FC<CarouselProps> = ({ children, id: _id }) => {
  const id = useRef(_id || genRandomId());

  return (
    <div id={id.current} className="slide carousel relative w-full" data-bs-ride="carousel">
      <div className="carousel-inner relative w-full overflow-hidden">
        {React.Children.map(children, (c, i) => (
          <div className={`carousel-item relative float-left w-full ${i === 0 ? 'active' : ''}`}>
            {c}
            <div className="carousel-caption absolute hidden text-center md:block">
              <h5 className="text-xl">There was an error</h5>{//temporary for debugging}
            </div>
          </div>
        ))}
      </div>
      <button
        className="carousel-control-prev absolute top-0 bottom-0 left-0 flex items-center justify-center border-0 p-0 text-center hover:no-underline hover:outline-none focus:no-underline focus:outline-none"
        type="button"
        data-bs-target={id.current}
        data-bs-slide="prev"
      >
        <span
          className="carousel-control-prev-icon inline-block bg-no-repeat"
          aria-hidden="true"
        ></span>
        <span className="visually-hidden">Previous</span>
      </button>
      <button
        className="carousel-control-next absolute top-0 bottom-0 right-0 flex items-center justify-center border-0 p-0 text-center hover:no-underline hover:outline-none focus:no-underline focus:outline-none"
        type="button"
        data-bs-target={id.current}
        data-bs-slide="next"
      >
        <span
          className="carousel-control-next-icon inline-block bg-no-repeat"
          aria-hidden="true"
        ></span>
        <span className="visually-hidden">Next</span>
      </button>
      <div className="carousel-indicators absolute right-0 bottom-0 left-0 mb-4 flex justify-center p-0">
        {React.Children.map(children, (_, i) => (
          <button
            type="button"
            data-bs-target={id.current}
            data-bs-slide-to={i}
            className={i === 0 ? 'active' : ''}
            aria-current="true"
            aria-label={`Slide ${i + 1}`}
          ></button>
        ))}
      </div>
    </div>
  );
};

export default Carousel;

and the relevant bits of my tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: ['src/**/*.{js,jsx,ts,tsx}', '../node_modules/tw-elements/dist/js/**/*.js'],
  plugins: [require('tw-elements/dist/plugin')],
 ...
};

Lastly, I’m calling the component in this way (using basic h2’s for testing):

<div className="my-4 flex h-1/3 w-full self-center lg:h-1/3 lg:w-5/6 ">
          <Carousel>
               <h2 className="min-w-1000 min-h-100 full block w-full bg-red-300 text-center">1</h2>
               <h2 className="min-w-1000 min-h-100 full block w-full bg-red-300 text-center">2</h2>
               <h2 className="min-w-1000 min-h-100 full block w-full bg-red-300 text-center">3</h2>
          </Carousel>
</div>

I’m pretty sure the error has something to do with configuration, but I couldn’t find anything online :frowning: Any help is appreciated :slight_smile: