Simple Carousel Image Slider Component for ReactJS v18
- Just Two Elements will be used. (for display images)
- Support GPU Render, by default.
- Support Image Preload.
- Support SSR. ( server-side-rendering )
// npm npm install react-simple-carousel-image-slider --save // yarn yarn add react-simple-carousel-image-slider import SimpleCarouselSlider from 'react-simple-carousel-image-slider'; const images = [ require('./img/1.jpg'), require('./img/2.jpg'), require('./img/3.jpg'), require('./img/4.jpg'), require('./img/5.jpg') ]; const App = () => { return ( <div> <SimpleCarouselSlider images={images} autoplay={false} width= "100%" height="450px" /> </div> ); } or
import SimpleCarouselSlider from 'react-simple-carousel-image-slider'; const images = [ "https://raw.githubusercontent.com/shafayatC/react-simple-carousel-image-slider/main/src/img/1.jpg", "https://raw.githubusercontent.com/shafayatC/react-simple-carousel-image-slider/main/src/img/5.jpg" ]; const App = () => { return ( <div> <SimpleCarouselSlider images={images} autoplay={false} width= "100%" height="450px" /> </div> ); } If You want to see more detail source,
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
| width | Number | Optional | Image Slider Width | |
| height | Number | Optional | Image Slider Height | |
| images | Array | Required | Images, Array Elements should be like this structure, {"image.jpg", ""image2.jpg} | |
| duration | String | Optional | css object | 0.7s |
| infinity | Boolean | Optional | Infinity image slide | true |
| autoplay | Boolean | Optional | Auto play slider | true |
| autplayDelay | Number | Optional | Auto play slide delay time | 3000 |
| parallax | Boolean | Optional | Parallax slider image | false |
If You want to see more detail,
- can customize by className with
!important;
/* slider */ #essSlide { // do something } .essSliderCls { // do something } /* controller */ .essController { // do something } .essNext { // do something } .essPrev { // do something } MIT