infinite-right-carousel
Example:
import React from "react";
import { useRef } from "react";
import Carousel from "./lib/Carousel.js";
function App() {
const cRef = useRef()
const prev = useRef()
const next = useRef()
return (
<section>
// previous button
<button ref={prev} onClick={()=>cRef.current.prev()} style={{borderRadius : "50%"}}>prev</button>
// carousel
<Carousel
prev={prev}
next={next}
ref={cRef}
ms={3000}
width={4}
sideBlurColor="white">
// items
<div className={"container"} style={{ height : "30vw", width : "30vw", margin : `0 max(.5rem,.5vw)`,}}>1</div>
<div className={"container"} style={{ height : "30vw", width : "30vw", margin : `0 max(.5rem,.5vw)`,}}>2</div>
<div className={"container"} style={{ height : "30vw", width : "30vw", margin : `0 max(.5rem,.5vw)`,}}>3</div>
<div className={"container"} style={{ height : "30vw", width : "30vw", margin : `0 max(.5rem,.5vw)`,}}>4</div>
</Carousel>
// next button
<button ref={next} onClick={()=>cRef.current.next()} style={{borderRadius : "50%"}}>next</button>
// change width and sideBlurColor color on click
<button onClick={()=>{
cRef.current.width(1)
cRef.current.sideBlurColor("")
}}>change width</button>
</section>
);
}
export default App;