Try the demo here.
- Circular image carousel
- Everything you see is customisable
- Get focus element to add in your own components
- Smooth, easy to implement, fantastic UI
$ npm install react-fancy-circular-carousel
Include the styles by importing FancyCarousel.css
import 'react-fancy-circular-carousel/FancyCarousel.css';| Parameter | Type | Description |
|---|---|---|
| images | String[] | mandatory List of image sources |
| setFocusElement | Function | optional SetState method to get focus element in parent component |
| offsetAngle | Number | optional Angle in degrees to offset the carousel elements |
| carouselRadius | Number | optional Carousel radius in px |
| centralImageRadius | Number | optional Central image radius in px |
| centralImageBoxShadow | String | optional Central image box shadow property |
| peripheralImageRadius | Number | optional Peripheral Image radius in px |
| peripheralImageBoxShadow | String | optional Peripheral image box shadow property |
| focusElementStyling | React.CSSProperties | optional Custom styling for the element in focus |
| border | Boolean | optional Enable/disable bordering |
| borderWidth | Number | optional Border stroke width property in px |
| borderHexColor | String | optional Border hex color as a string excluding the '#' |
| autoRotateTime | Number | optional Time in seconds for an auto rotating carousel |
| transitionTime | Number | optional Time in seconds for the rotating transition |
| navigationTextSize | Number | optional ↓ Arrow font size in rem |
| navigationButtonRadius | Number | optional Navigation button radius in px |
| navigationButtonColor | String | optional ↓ Arrow hex color as a string excluding the '#' |
| navigationButtonBgColor | String | optional Navigation button hex color as a string excluding the '#' |
| navigationButtonStyling | React.CSSProperties | optional Custom styling for navigation buttons |
import React from "react";
import FancyCarousel from "react-fancy-circular-carousel";
import 'react-fancy-circular-carousel/FancyCarousel.css';
import image1 from './assets/image1.png';
import image2 from './assets/image2.png';
import image3 from './assets/image3.png';
import image4 from './assets/image4.png';
const YourComponent = () => (
const images = [image1, image2, image3, image4];
return <div className="carousel">
<FancyCarousel images={images} />
</div>
);
export default YourComponent;Utility using which one can know which element is currently at focus and may add relevant components around it. For eg. if the carousel portrays images of cities, this feature may help you update the description in the information box along side the carousel.
import React, { useState } from "react";
import FancyCarousel from "react-fancy-circular-carousel";
import 'react-fancy-circular-carousel/FancyCarousel.css';
import image1 from './assets/image1.png';
import image2 from './assets/image2.png';
import image3 from './assets/image3.png';
import image4 from './assets/image4.png';
const YourComponent = () => (
// the focus element would be the array index of the image currently at focus
const [focusElement, setFocusElement] = useState(0);
const images = [image1, image2, image3, image4];
const info = ['Delhi', 'Mumbai', 'Bengaluru', 'Kolkata'];
return <div className="carousel">
<FancyCarousel images={images} setFocusElement={setFocusElement}/>
<div className="info-box-wrapper">
<p> {info[focusElement]} </p>
</div>
<div>
);
export default YourComponent;Customise the carousel to your needs such as modifying the carousel size, image size, adding styling such as drop shadow, adding auto rotate, etc The focusElementStyling and navigationButtonStyling props are of type React.CSSProperties, which is essentially a JavaScript object containing camelcased CSS properties and their corresponding values.
To know more check the official documentation here.
import React from "react";
import FancyCarousel from "react-fancy-circular-carousel";
import 'react-fancy-circular-carousel/FancyCarousel.css';
import image1 from './assets/image1.png';
import image2 from './assets/image2.png';
import image3 from './assets/image3.png';
import image4 from './assets/image4.png';
const YourComponent = () => (
const images = [image1, image2, image3, image4];
return <div className="carousel">
<FancyCarousel
images={images}
carouselRadius={400}
peripheralImageRadius={100}
centralImageRadius={200}
focusElementStyling={{border: '2px solid #ba4949'}}
autoRotateTime={3}
borderWidth={4}
borderHexColor={'1c364f'}
/>
</div>
);
export default YourComponent;With navigators
With auto rotation
Npm Page
Try it out for yourselves and ⭐ this repo if you like it!
MIT © Ninad Sutrave
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent