0.0.4 • Published 3 years ago
dico-json-carousel v0.0.4
dico-json-carousel 🎠
Introduction 🔖
Easy-breezy React-slider module for everyone!
Sample 🍭
Installation ✨
Copy & paste the following to your CLI:
npm i dico-json-carousel
How to use 💡
Default setting
key | value | description |
---|---|---|
perPanel | 4 | Number of items to put on each page. |
speed | 500 | Animation transition speed in millisecond. |
count | false | Page information: shown as 'current page / last page'. |
loop | true | Infinite-loop sliding option. |
Props
children
: An "Array" that holds the items you want to put on each slide.options
: An "Object" that holds the information about your customizing options of the carousel. You can customizeperPanel
,speed
,count
,loop
options as you want!
import React from "react";
import styled from "styled-components";
import Carousel from "dico-json-carousel";
const Card = styled.div`
height: 10vh;
padding: 3rem;
font-size: 1.2rem;
text-align: center;
border: 1px solid red;
border-radius: 0.25rem;
`;
function App() {
const options = {
perPanel : 4,
speed: 500,
count: true,
loop: false
}
return (
<div className="App">
<Carousel options={options}>
<Card>1</Card>
<Card>2</Card>
<Card>3</Card>
<Card>4</Card>
<Card>5</Card>
<Card>6</Card>
<Card>6</Card>
</Carousel>
</div>
);
}
export default App;