README

ui-offer-slider

This component will render its children as a carousel items

Installation

yarn add @comparaonline/ui-offer-slider

Usage

import { Slider } from '@comparaonline/ui-offer-slider';

class MyView extends React.Component {
  render() {
    return (
      <div>
        <Slider slidesToShow={3} infinite={false}>
          <Grid item>
            <img src={'logos/logo1.svg'} />
          </Grid>

          <Grid item>
            <img src={'logos/logo2.svg'} />
          </Grid>

          <Grid item>
            <img src={'logos/logo3.svg'} />
          </Grid>
        </Slider>
      </div>
    );
  }
}

Note

In order to render correctly the carousel component you must import all the styles needed for the components, so please in your app use the following code

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

step below really matters when using SSR

You don't need to install the slick-carousel package because it's a dependency from our package @comparaonline/ui-offer-slider by the way you can access to that package too.

Changing Arrow component

@comparaonline/ui-offer-slider uses an Arrow component, that you can import by go through

import { Arrow } from '@comparaonline/ui-offer-slider/dist/components/Arrow';

You can import the ArrowProps type too

import { ArrowProps } from '@comparaonline/ui-offer-slider/dist/components/Arrow';

this component allow you to change some features, like the icon to show, apply some styles to it, etc, so this component uses @comparaonline/ui-offer-icons packages internally to use the icons, so to change the icon, you can do the following

import { Slider } from '@comparaonline/ui-offer-slider';
import { Arrow } from '@comparaonline/ui-offer-slider/dist/components/Arrow';

class MyView extends React.Component {
  render() {
    return (
      <div>
        <Slider
          nextArrow={<Arrow icon={'times'} color={'blue'} />}
          prevArrow={<Arrow icon={'user'} color={'green'} />}
          slidesToShow={3}
          infinite={false}
        >
          <Grid item>
            <img src={'logos/logo1.svg'} />
          </Grid>

          <Grid item>
            <img src={'logos/logo2.svg'} />
          </Grid>

          <Grid item>
            <img src={'logos/logo3.svg'} />
          </Grid>
        </Slider>
      </div>
    );
  }
}

Props

This packages don't use any abstration into it, you must provide the same interface that React Slick uses, so for more information refers to React Slick Documentation

@comparaonline/ui-offer-slider

Usage no npm install needed!