react-responsive-framer-motion-carousel

While the react-responsive-framer-motion-carousel provides robust functionality for managing content transitions and user interaction, the real power lies in its extensive customization options. This means you have complete control over the carousel's appearance (Meaning figure it out 😆).

- No Imposed Styles: The component doesn't enforce any default styles, allowing you to tailor the carousel's look and feel seamlessly to match your project's unique design language.
- CSS Integration: Leverage the full power of CSS to define styles for various carousel elements like navigation buttons, counters, and individual content items.
- Component Flexibility: You're not limited to pre-defined elements. Feel free to integrate your custom components within the carousel for even greater design possibilities. Imagine embedding custom image containers, progress bars, or even interactive elements within each carousel item!

Customization Options:
- className (string): Add an additional CSS class name for styling purposes.
- type (string): Change animation style of the Carousel. Currently it has horizontal (default) and vertical mode.
- drag (boolean, default: true): Enable or disable dragging/swiping functionality.
- range (number, default: 1000): Optional control for the distance the children animate in from.
- navigation (boolean, default: true): Buttons that navigate to the corresponding child. Active index is highlighted.
- controls (boolean, default: true):
- Show (true, default) or hide (false) navigation buttons that users can click on to move between carousel items.
- You can customize the appearance of these buttons using CSS.
The component provides pre-defined class names next and prev for targeting the buttons specifically.
- counter (array, default: [false, ""]): Optional counter configuration (array with two elements).
- Element 0 (boolean): Controls visibility of the counter. Defaults to false.
- true: Displays the counter.
- false: Hides the counter.
- Element 1 (string, optional): Custom string to display before the counter (if counter[0] is true). If omitted, an empty string is displayed.
- noExit (boolean, default: false): Useful for stopping rendering issues with large objects; disables exit animation.
- swipeConfindence (number, default: 1000): Adjust the sensitivity of swipe detection. Lower values make swiping easier, higher values make it harder.
- interval (array, default: [false, 0]): Configure automatic pagination:
- First element (boolean): Enables automatic pagination (defaults to false).
- Second element (number): Interval duration in seconds (defaults to 0).
- intervalActive (boolean, default: true): Useful for controlling the interval. I.E stop the interval when hovering over something.
- goToIndex (number): - Number u can pass to the carousel that will set the index. Remember child 1 is index 0 (navigation does the same, but this is if you want to implement your custom logic).
- onChange (function): - Callback that returns the index when sliding. Useful for knowing when u should display a loading state. More information down below.
- ref (React.ref): - Use the paginate function from the carousel externally (paginate(1), paginate(-1))

Example with Customization:

`javascript
import Carousel from 'react-responsive-framer-motion-carousel';

function MyComponent() {
return (
className="my-custom-carousel"
drag={false} // Disable dragging
counter={[true]} // Enable counter without string
interval={[true, 3]} // Enable automatic pagination every 3 seconds
intervalActive={true} // Activate the configured interval
swipeConfindence={500} // Increase swipe sensitivity
>
);
}
`

Example with loading, useRef and goToIndex:

Even tho, the paginate function can be accessed outside of the carousel component. It is better to use the buttons provided and style them based on your needs.

`javascript
import Carousel from 'react-responsive-framer-motion-carousel';
import { useRef, useState } from 'react';

function MyComponent() {
// get the carouselRef
const carouselRef = useRef(null);
// state for loading
const [loading, setLoading] = useState(true)
// setting the index externally, again better to use the navigation provided by the carousel and style accordingly
const [index, setIndex] = useState(null)

// set loading to false when the image is loaded.
const handleLoad = () => {
setLoading(false)
}
// set loading to true each time the carousel slides
const handleChange = () => {
setLoading(true)
}
return (
<>
{/conditionally render loading if the content is being loaded/}
{loading && "loading..."}





{/external pagination/}
carouselRef.current?.paginate(-1)}>prev
carouselRef.current?.paginate(1)}>next
{/change the index (This will give the previous animation)/}
setIndex(e.target.value)} />

)
}
``

Contributing:

I welcome contributions to improve this component! Feel free to submit pull requests or create issues on the project's GitHub repository Github.com/Bleachfuel/react-carousel 🤗.

License:

This project is licensed under the MIT License (see LICENSE file for details) 😇.