Lens Design System – React Carousel component
npm install @k8slens/lds-carouselnpm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-carousel@k8slens/lds-tokens/lib/es/font-imports.css in your React app to include fonts@k8slens/lds/lib/es/index.css in your React app to include core styles@k8slens/lds-carousel/lib/es/index.css in your React app to include Carousel styles``tsx
import Carousel from "@k8slens/lds-carousel";
export const Component = () => (
);
`
tsx
import Carousel from "@k8slens/lds-carousel";export const Component = () => {
const videoRef = React.useRef(null);
const [isVideoPlaying, setIsVideoPlaying] = useState(false);
const [playing, setVideoPlaying] = useState(false);
useEffect(() => {
if (videoRef?.current && playing && !isVideoPlaying) {
videoRef.current.play().catch((e) => {
console.log(e);
});
}
}, [videoRef, playing, isVideoPlaying]);
return (
key="video-1" // Key needs to include the word "video"
ref={videoRef}
autoPlay={playing}
src="src"
muted // Mute video to avoid autoplay issues
onPlay={() => setIsVideoPlaying(true)}
onPause={() => setIsVideoPlaying(false)}
onEnded={() => setIsVideoPlaying(false)}
/>



);
}
``