React Slider
Examples
import Slider from '@lucchev/react-slider';
import '@lucchev/react-slider/styles.css';
const args = {
nav: {
position: {
top: '100px',
left: '10px',
right: '20px',
}
},
};
return (
<Slider {...args}>
<div className="w-[400px] h-[200px] bg-slate-900" />
<div className="w-[400px] h-[200px] bg-slate-800" />
<div className="w-[400px] h-[200px] bg-slate-700" />
<div className="w-[400px] h-[200px] bg-slate-600" />
<div className="w-[400px] h-[200px] bg-slate-500" />
<div className="w-[400px] h-[200px] bg-slate-400" />
<div className="w-[400px] h-[200px] bg-slate-300" />
<div className="w-[400px] h-[200px] bg-slate-200" />
<div className="w-[400px] h-[200px] bg-slate-100" />
</Slider>
)
const args = {
slider: { gap: '24px' },
card: {
size: { width: '400px', height: '250px' },
},
nav: {
position: { top: '120px', left: '0px', right: '0px' },
size: { width: '64px', height: '64px' },
},
};
return (
<Slider {...args}>
<div className="w-full h-full bg-slate-900" />
<div className="w-full h-full bg-slate-800" />
<div className="w-full h-full bg-slate-700" />
<div className="w-full h-full bg-slate-600" />
<div className="w-full h-full bg-slate-500" />
<div className="w-full h-full bg-slate-400" />
<div className="w-full h-full bg-slate-300" />
<div className="w-full h-full bg-slate-200" />
<div className="w-full h-full bg-slate-100" />
</Slider>
)