Welcome to the React Slide Select Demo

Here are some react-slide-select demos. This slider provides two features, and 2 features only. 1: You can swipe through a list of "slides". 2: You may "select" one of them, at which point a callback runs I suppose.

Example 1: A "Product" styled slider.

In this example, we see a "Product" styled slider. You may provide an `items` prop to this class, which should be an array of objects that you intend to have displayed. You should also provide your own function to the onSelect prop on the SlideSelect class. When the onSelect method is invoked, it will be passed the data from the item that you clicked on.

Component not loaded

Example 2: A "Product" styled slider with custom children

Please note that the custom inner-child class -must- implement a call to the `this.props.onClick` property for the internal element that you want to be listening to the click event. In this context, when the onSelect passed to the SlideSelect method is invoked, it will only receive the index of the child that you clicked on.

Component not loaded

Example 3: A "Hero" styled slider

In this example, we see a "Hero" styled slider in the wild. This creature has 4 distinct parts of its body. The landing slide has multiple inner call-to-actions, the information only slide has no interactivity, the promotion slide is selectable from anywhere on its surface.

Component not loaded

Example 4: A "Hero" styled slider that is controlled by a smaller picker

Click on the smaller selector to change the index of the top hero. Bam. Cross component communication.

Component not loaded

A slider who's parent rezises without the window changing size

Select a width percentage

Component not loaded

A slider who's number of children change over time

Select a number of Kittens to display

Component not loaded

A slider with no transitioning

Jump to a kitten using its index without the animated transition.

Component not loaded