volkeno-awesome-carousel

volkeno-awesome-carousel

Powerful, lightweight and fully customizable carousel component for React apps.

Install

npm install --save volkeno-awesome-carousel

Usage

import React, { Component } from 'react'

import VolkenoCarousel from 'volkeno-awesome-carousel'
import 'volkeno-awesome-carousel/dist/index.css'

const Example = () => {

      let slides = [
    {
      img: <img src='https://picsum.photos/800/300/?random' alt='1' />,
      text: (
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis
          viverra amet, morbi neque, venenatis est volutpat ipsum aliquam.
          Egestas habitant in metus, in leo gravida nunc nisl. Amet, amet sed
          porttitor ut felis. Eu aenean et cras duis faucibus eu. Rhoncus,
          euismod volutpat gravida in fermentum sollicitudin volutpat cursus.
          Elementum id scelerisque egestas nec pulvinar. Sed volutpat
          pellentesque pellentesque semper nisl, lectus sit. Sed.
        </p>
      ),
      author: <p>Adama Diakhaté</p>,
      subTitle: <p>Product manager</p>
    },
    {
      img: <img src='https://picsum.photos/800/301/?random' alt='2' />,
      text: (
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis
          viverra amet, morbi neque, venenatis est volutpat ipsum aliquam.
          Egestas habitant in metus, in leo gravida nunc nisl. Amet, amet sed
          porttitor ut felis. Eu aenean et cras duis faucibus eu. Rhoncus,
          euismod volutpat gravida in fermentum sollicitudin volutpat cursus.
          Elementum id scelerisque egestas nec pulvinar. Sed volutpat
          pellentesque pellentesque semper nisl, lectus sit. Sed.
        </p>
      ),
      author: <p>Mbaye Niass</p>,
      subTitle: <p>Product manager</p>
    },
    {
      img: <img src='https://picsum.photos/800/302/?random' alt='3' />,
      text: (
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis
          viverra amet, morbi neque, venenatis est volutpat ipsum aliquam.
          Egestas habitant in metus, in leo gravida nunc nisl. Amet, amet sed
          porttitor ut felis. Eu aenean et cras duis faucibus eu. Rhoncus,
          euismod volutpat gravida in fermentum sollicitudin volutpat cursus.
          Elementum id scelerisque egestas nec pulvinar. Sed volutpat
          pellentesque pellentesque semper nisl, lectus sit. Sed.
        </p>
      ),
      author: <p>Baba Sarr</p>,
      subTitle: <p>Product manager</p>
    },
    {
      img: <img src='https://picsum.photos/800/303/?random' alt='4' />,
      text: (
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis
          viverra amet, morbi neque, venenatis est volutpat ipsum aliquam.
          Egestas habitant in metus, in leo gravida nunc nisl. Amet, amet sed
          porttitor ut felis. Eu aenean et cras duis faucibus eu. Rhoncus,
          euismod volutpat gravida in fermentum sollicitudin volutpat cursus.
          Elementum id scelerisque egestas nec pulvinar. Sed volutpat
          pellentesque pellentesque semper nisl, lectus sit. Sed.
        </p>
      ),
      author: <p>Babacar Mbengue</p>,
      subTitle: <p>Product manager</p>
    },
    {
      img: <img src='https://picsum.photos/800/304/?random' alt='5' />,
      text: (
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis
          viverra amet, morbi neque, venenatis est volutpat ipsum aliquam.
          Egestas habitant in metus, in leo gravida nunc nisl. Amet, amet sed
          porttitor ut felis. Eu aenean et cras duis faucibus eu. Rhoncus,
          euismod volutpat gravida in fermentum sollicitudin volutpat cursus.
          Elementum id scelerisque egestas nec pulvinar. Sed volutpat
          pellentesque pellentesque semper nisl, lectus sit. Sed.
        </p>
      ),
      author: <p>Paul Gomis</p>,
      subTitle: <p>Product manager</p>
    }
  ]
    const callback = function (index: any) {
    console.log('callback', index)
  }
    return (
        <VolkenoCarousel
            slides={slides}
            autoplay={false}
            onSlideChange={callback}
            interval={5000}
        />
    )

}

Configuration - Props

Property	Type	Require	Default	Description
slides	array	true		text,img, author, subTitle
autoplay	boolean	false	...	autoplay slide
interval	number	false	3000ms	time to move on to another slide
onSlideChange	callback	...	...	(onSlideChange) => void

License

MIT © VolkenoMakers