react-slider-views

Mirror for react-swipeable-views because original component do not have a correct support. The component works exactly that react-swipeable-views and you can see the same documentation.

A React component for swipeable views.

Documentation

Get started

• Installation
• Usage
• Example projects
• Supported projects

Component API

• Component API

More

• Supported projects
• Demos

Installation

Browser

npm i --save react-slider-views

The problem solved

Check out the demos from a mobile device (real or emulated). It's tiny (<10 kB gzipped), it quickly renders the first slide, then lazy-loads the others.

Simple example

Browser

import React from "react";
import SliderViews from "react-slider-views";

const styles = {
    slide: {
        padding: 15,
        minHeight: 100,
        color: "#fff",
    },
    slide1: {
        background: "#FEA900",
    },
    slide2: {
        background: "#B3DC4A",
    },
    slide3: {
        background: "#6AC0FF",
    },
};

const MyComponent = () => (
    <SliderViews>
        <div style={Object.assign({}, styles.slide, styles.slide1)}>slide n°1</div>
        <div style={Object.assign({}, styles.slide, styles.slide2)}>slide n°2</div>
        <div style={Object.assign({}, styles.slide, styles.slide3)}>slide n°3</div>
    </SliderViews>
);

export default MyComponent;

Supported platforms

The API is as consistent as possible between the three platforms so the same component can be used independently on where it's running.

Browser

| IE | Edge | Windows Phone | Firefox | Chrome | Safari | | :---- | :--- | :------------ | :------ | :----- | :----- | | >= 10 | ✓ | x | >= 28 | >= 29 | >= 8 |

Legacy browser support

react-slider-views supports modern browsers out-of-the-box, but requires additional CSS to support legacy browsers. To support IE 10 and older versions of Mobile Safari, include react-slider-views/build/styles/legacy-browser-support.css.

iOS

Android