@developerx167/infinite-right-carousel

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;