{"library":"react-alice-carousel","title":"React Alice Carousel","description":"React Alice Carousel is a feature-rich React component designed for creating various content galleries, slideshows, and rotators. As of version 2.9.1, it offers extensive customization, including auto height/width, autoplay with various strategies, custom animation types (slide, fadeout), infinite looping, lazy loading, and full mobile and touch/drag support. It is also server-side rendering (SSR) friendly and ships with TypeScript definitions, making it suitable for modern web applications. The library is actively maintained, with a clear distinction between its v1 and v2 APIs, indicating a commitment to evolving its feature set and internal architecture over time. The project maintains a steady release cadence for bug fixes and minor features.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-alice-carousel"],"cli":null},"imports":["import AliceCarousel from 'react-alice-carousel';","import 'react-alice-carousel/lib/alice-carousel.css';","@import \"react-alice-carousel/lib/scss/alice-carousel.scss\";"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst handleDragStart = (e) => e.preventDefault();\n\nconst items = [\n  <img key=\"1\" src=\"https://via.placeholder.com/600x400/FF0000/FFFFFF?text=Slide+1\" onDragStart={handleDragStart} role=\"presentation\" />,\n  <img key=\"2\" src=\"https://via.placeholder.com/600x400/00FF00/FFFFFF?text=Slide+2\" onDragStart={handleDragStart} role=\"presentation\" />,\n  <img key=\"3\" src=\"https://via.placeholder.com/600x400/0000FF/FFFFFF?text=Slide+3\" onDragStart={handleDragStart} role=\"presentation\" />\n];\n\nconst Gallery = () => (\n  <div style={{ maxWidth: '800px', margin: '0 auto' }}>\n    <h2>My Awesome Carousel</h2>\n    <AliceCarousel\n      mouseTracking\n      items={items}\n      responsive={{\n        0: { items: 1 },\n        768: { items: 2 },\n        1024: { items: 3 }\n      }}\n      infinite\n      autoPlay\n      autoPlayInterval={3000}\n      disableButtonsControls\n      controlsStrategy=\"alternate\"\n    />\n  </div>\n);\n\nexport default Gallery;","lang":"typescript","description":"Demonstrates basic usage of React Alice Carousel with `mouseTracking`, `infinite` loop, `autoPlay`, responsive items, and custom controls strategy, using placeholder images.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}