as-slider

Install

npm install --save as-slider

Usage

import React, { Component } from 'react'
import { Slider, SliderSm, SingleProdSlider } from 'as-slider';
class Example extends Component {
  render () {
    return (
      <Slider dataSet={data} option={option} interval={4} wrapClassName={"newClass"} />

      <SliderSm dataSet={data} interval={4} charLimit={100} wrapClassName={"customClass"} />

      <SingleProdSlider dataSet={data_values} interval={6} wrapClassName="multiClassName" />
    )
  }
}

Data values

const data=[
  {title:'title', description:'description', imageUrl:'image url', url:'link_url'},
  {title:'title', description:'description', imageUrl:'image url',}
  ...
]

const data_values = [
  {
    title: "first",
    realPrice:'$124',
    offerPrice:'$100',
    tag:'ASPIRE',
    offer:'SUPERSTAR',
    description: "Lorem Ipsum is...",
    imageUrl: "homeStrawHat.png",
    url: "www.url.com",
  },
  ...
]

Option

Options are set as responsive properties, they help you customize the no of slide show on screen.

const option = {
  responsive: { lg: 5, md: 4, sm: 2 },
  charLimit: 100,
};

Default values/options

| Property | Description | Type | Default | | ------------- | --------------------------------------------------------------------------------- | ------ | ------- | | lg | You can set number of slide show on screen, as per screen size. | object | 5 | | md | You can set number of slide show on screen, as per screen size. | object | 4 | | sm | You can set number of slide show on screen, as per screen size. | object | 2 | | interval | Set slide interval time | number | 5 | | wrapClassName | use "wrapClassName" class, if you want to show multiple "as-slides" on same page. | string | | | | charLimit | used for add description char limit to show | number | 120 | |

Example

Demo

Keyword

as-slider, react-as-slider

License

MIT © Ajit16