📷 React Awesome Image Carousel 🌈
react-awesome-image-carousel is a library that allows you to easily add an image carousel to your application. There are two transition types available these being fade, and slide.
Installation
npm install --save react-awesome-image-carouselExamples
Slide
Fade
Basic use
import React from 'react';
import ImageCarousel from 'react-awesome-image-carousel';
import image1 from '../assets/img1.jpeg';
import image2 from '../assets/img2.jpeg';
import image3 from '../assets/img3.jpeg';
const images = [{
src: image1
},{
src: image2
},{
src: image3
}];
export default class Example extends React.Component {
render() {
return (
<div style={{width: '100vw', height: '100vh', position: 'relative', overflow: 'hidden'}}>
<ImageCarousel
transition={'slide'}
transitionDuration={0.3}
auto
autoDuration={3}
coolOff={6}
images={images}
/>
</div>
);
}
}ImageCarousel
Props
Summary
| Name | Type | Description |
|---|---|---|
| auto | boolean | This determines whether or not the images transition automatically |
| autoDuration | number (seconds) | This sets the duration of when to automatically transition to the next image |
| coolOff | number (seconds) | This is the duration for how long an image pauses before resuming the auto image transition when the next or previous buttons are clicked |
| disableButtons | boolean | This will remove the previous and next buttons |
| dots | boolean | This will add click-able dots to the bottom of the slider to allow the user to navigate the slides |
| customPrevButton | component | This will remove the default left button and use a your custom component, an onClick prop will be passed in |
| customNextButton | component | This will remove the default right button and use a your custom component, an onClick prop will be passed in |
| images | array | This should be an array of objects with a src key value pair |
| transition | string | This can either be set to 'fade' or 'slide' which will set the transition type of the images |
| transitionDuration | number (seconds) | This is the duration of the transition |