react-touch-carousel

import TouchCarousel from 'react-touch-carousel'; import React, { useRef } from 'react'; const listOfData = [ { id: 1, title: 'Slide A', color: '#ffadad' }, { id: 2, title: 'Slide B', color: '#ffd6a5' }, { id: 3, title: 'Slide C', color: '#fdffb6' }, { id: 4, title: 'Slide D', color: '#caffbf' }, { id: 5, title: 'Slide E', color: '#9bf6ff' } ]; function CarouselContainer({ cursor, carouselState, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, children }) { const containerRef = useRef(); return ( <div ref={containerRef} style={{ width: '100%', maxWidth: '500px', height: '250px', overflow: 'hidden', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #eee', margin: '20px auto' }} onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} > {children} </div> ); } function renderCard(index, modIndex, cursor) { const item = listOfData[modIndex]; const translateX = (index - cursor) * 375; // Assuming cardSize 375px return ( <div key={item.id} style={{ position: 'absolute', transform: `translateX(${translateX}px)`, width: '350px', height: '180px', backgroundColor: item.color, borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.8em', color: 'white', boxShadow: '0 6px 12px rgba(0,0,0,0.2)', transition: 'transform 0.3s ease-out' }} > {item.title} </div> ); } // To render this in a React application: // export default function App() { // return ( // <TouchCarousel // component={CarouselContainer} // cardCount={listOfData.length} // cardSize={375} // renderCard={renderCard} // loop // autoplay={3000} // defaultCursor={0} // onRest={(idx, modIdx) => console.log(`Carousel rested at index: ${idx}, modIndex: ${modIdx}`)} // /> // ); // }