Responsive, Lite & Mobile first React Images Carousel
Responsive, lightweight and mobile-first images carousel component for all React apps.
- Responsive
- Mobile first
- Liteweight
- Pagination dots
- Slide Transition
- Infinite loop
- Works best with the same size images
npm install react-images-carousel
``javascript
import React from 'react';
import ReactImagesCarousel from 'react-images-carousel';
export default function Home() {
const sliderData = [
"https://images.unsplash.com/photo-1608447714925-599deeb5a682?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750",
"https://images.unsplash.com/photo-1504610926078-a1611febcad3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750",
"https://images.unsplash.com/photo-1419225692236-28f3211d7038?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750",
"https://images.unsplash.com/photo-1515446870326-c532f9a8d954?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750",
"https://images.unsplash.com/photo-1545091741-2231068f3478?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750",
];
return (
`
| Name | Value | Description |
| ---------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| images | array | Images array for showing in the carousel |string
| sliderBg | | Background color of the carousel, defaults to '#000000'|string
| paginationBg | | Background color of the navigaton bar, defaults to '#000000'|
Demo Image credits to Unsplash.
`
``