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