0.0.4 • Published 3 years ago

dico-json-carousel v0.0.4

Weekly downloads
-
License
-
Repository
github
Last release
3 years ago

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

keyvaluedescription
perPanel4Number of items to put on each page.
speed500Animation transition speed in millisecond.
countfalsePage information: shown as 'current page / last page'.
looptrueInfinite-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 customize perPanel, 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;