react-freeslider
A simple, performant, and cross-browser component for make beautifull free responsive slider.
Installation
npm i react-freeslider
Demo
Usage
import { useRef } from "react";
import FreeSlider from "react-freeslider";
const sliderWrap = {
marginTop: 20,
maxWidth: 900,
margin: "auto",
};
const buttonsWrap = {
marginTop: 20,
marginBottom: 20,
};
const slideStyle = {
width: 250,
height: 140,
borderStyle: "solid",
borderWidth: 1,
borderRadius: 4,
borderColor: "black",
textAlign: "center",
paddingTop: 100,
};
function App() {
const slider = useRef();
return (
<>
<div style={sliderWrap}>
<div style={buttonsWrap}>
<button onClick={() => slider.current.prev()}>Prev</button>
<button onClick={() => slider.current.next()}>Next</button>
</div>
<FreeSlider ref={slider}>
<div className="slide" style={slideStyle}>
Slide 1
</div>
<div className="slide" style={slideStyle}>
Slide 2
</div>
<div className="slide" style={slideStyle}>
Slide 3
</div>
<div className="slide" style={slideStyle}>
Slide 4
</div>
<div className="slide" style={slideStyle}>
Slide 5
</div>
</FreeSlider>
</div>
</>
);
}
export default App;