React-slider-views NPM

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

Component API

Component API

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

usage

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.

browser