@somedaycode/react-carousel
react-carousel for your projects.
easy to customize, simple but also powerful.
Installation
npm install @somedaycode/react-carousel
Example
code written as example
import React from 'react';
import Carousel from '@somedaycode/react-carousel';
import styled from 'styled-components';
const App = () => {
const options = {
carouselWidth: 800,
itemsToShow: 4,
duration: 0.5,
timing: 'ease-in-out',
arrowSize: 20,
};
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].map((card) => (
<Item>{card}</Item>
));
return (
<Main>
<Carousel {...options}>{items}</Carousel>
</Main>
);
};
const Main = styled.main`
display: flex;
justify-content: center;
`;
// width: 190px = 200px - margin(5px + 5px)
const Item = styled.div`
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
background: linear-gradient(to right, #ffafbd, #ffc3a0);
border-radius: 10px;
width: 190px; // 200px - margin(5px + 5px)
height: 200px;
`;
export default App;
props
Name | Description | value |
---|---|---|
carouselWidth |
Carousel total width (px) |
null or Number without 'px' |
itemsToShow |
A number of Items you want to show in Carousel | Number |
duration |
The length of time a transition animation should take to complete. | Number |
timing |
Transition-timing-function |
String : 'ease', 'ease-out' etc. MDN
|
arrowSize |
Arrow size (px) | Number |
How to customize your Carousel or Arrow?
You can simply customize your carousel or arrow with css
First, create a css file (ex. carouselStyle.css)
/*
* carouselStyle.css
* Each component has own className
*/
.carousel {
/* here you write css */
}
.carousel-right-arrow {
/* here you write css */
}
.carousel-left-arrow {
/* here you write css */
}
main {
display: flex;
justify-content: center;
}
div {
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
background: linear-gradient(to right, #ffafbd, #ffc3a0);
border-radius: 10px;
width: 190px; /* 200px - margin(5px + 5px) */
height: 200px;
}
then, Import css file to your Carousel
without using styled-components
import './carouselStyle.css';
import Carousel from '@somedaycode/react-carousel';
const App = () => {
const options = {
// options
};
const items = [1, 2, 3, 4].map((card) => <div>{card}</div>);
return (
<main>
<Carousel {...options}>{items}</Carousel>
</main>
);
};
Please let me know if you get any issues while using @somedaycode/react-carousel
.
email: somedaycode@gmail.com
github: https://github.com/somedaycode/somedaycode-react-carousel