Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

framer-motion-carousel

Package Overview
Dependencies
1
Maintainers
1
Versions
8
Issues
File Explorer

Advanced tools

framer-motion-carousel

A simple framer motion carousel component for React

    1.0.7latest

Version published
Maintainers
1
Yearly downloads
3,112

Weekly downloads

Changelog

Source

1.0.7

  • pull request #4

Readme

Source

framer-motion-carousel

A simple framer-motion-carousel, used for framer-motion, chakra-ui support click and swipe, support custom arrows, dots, easy to use.

Basic Usage

import * as React from "react"; import Carousel from "framer-motion-carousel"; const colors = ["#f90", "#ef0", "#e0f"]; const App = () => ( <div style={{ width: 600, height: 400 }}> <Carousel> {colors.map((item, i) => ( <div key={i} style={{ width: "100%", height: "100%", backgroundColor: colors[i], }} ></div> ))} </Carousel> </div> ); export default App;

img element should add draggable=false

<div style={{ width: 600, height: 400, margin: "0 auto" }}> <Carousel> {[1, 2, 3, 4].map((item, i) => ( <img draggable="false" src={`./${item}.jpg`} key={i} width="100%" alt="" /> ))} </Carousel> </div>

Example

Live Demo

example

props

propstypedefaultdescription
loopbooleantrueloop play
autoPlaybooleantrueauto play
intervalnumber2000auto play interval
renderArrowLeft({handlePrev: () => void, activeIndex: number}) => React.ReactNodenullcustom your arrows
renderArrowRight({handleNext: () => void, activeIndex: number}) => React.ReactNodenullcustom your arrows
renderDots({activeIndex: number, setActiveIndex: (index: number) => void;}) => React.ReactNodenullcustom your dots

Development

yarn install yarn build

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc