Slider/Swiper

The Slider component is a mobile touch slider with hardware accelerated transitions.

Why use it

The Slider component builds the slider so that the developer does not have to build their own slider. It uses the iDangerous Swiper under the hood.

Props

Name	Type	Default	Description
children*	node		The swiper content
autoPlay	boolean	false	Whether to enable autoplay
interval	number	3000	Delay between transitions (in ms)
controls	object | boolean	false	Whether to show controls for prev and next slide. Check IDSwiper API for the object use.
className	string	null	Class name for styling
classNames	object	{}	Class names for specific elements. Available elements container, item, bulletClass, bulletActiveClass Example: {bulletActiveClass: 'active-bullet'}
rebuildOnUpdate	boolean	true	Whether to rebuild swiper when component is updated
initialSlide	number	0	Index number of initial slide
slidesPerView	number	1	Number of slides per view (slides visible at the same time on slider’s container). Is always 1 if loop is set totrue.
indicators	boolean	false	Whether to show pagination (e.g. bullets)
loop	boolean	false	Whether to enable continuous loop mode
freeMode	boolean	false	Whether slides have fixed positions. If true then slides do not have fixed positions.
onSlideChange	function		Callback invoked when currently active slide is changed
zoom	object | boolean	false	Enables zoom functionality. Object with zoom parameters or boolean true to enable with default settings.
disabled	boolean	false	Whether to disable swiping to previous or next slide
*			Additionally, you can use every param from the IDSwiper and it simply passes through.

Slider.Item

A wrapper for a single slide of the slider.

Props

Name	Type	Default	Description
children*	node		The item content
className	string	null	className for styling

Usage

import { Slider } from '@shopgate/engage/components';

const slides = [
    {
      id: 1,
      content: 'My first slide',
    },
    {
      id: 2,
      content: 'My second slide',
    }
];

const Component = () => (
    <Slider
        loop={true}
        autoPlay={true}
    >
        {slides.map((slide) => (
            <Slider.Item key={slide.id)}>
              <p>{slide.content}</p>
            </Slider.Item>
        ))}
    </Slider>
);

export default Component;