Swiper Slider for React Native and Web

react-native-web-swiper

Simple swiper / slider. Works both on React-Native and React-Native-Web.

Installation

$ npm i react-native-web-swiper --save

Basic Usage

import React from "react";
import {View,Text,StyleSheet} from "react-native";
import Swiper from "react-native-web-swiper";

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    slideContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
    slide1: {
        backgroundColor: "rgba(20,20,200,0.3)"
    },
    slide2: {
        backgroundColor: "rgba(20,200,20,0.3)"
    },
    slide3: {
        backgroundColor: "rgba(200,20,20,0.3)"
    },
});

export default class Screen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Swiper>
                    <View style={[styles.slideContainer,styles.slide1]}>
                        <Text>Slide 1</Text>
                    </View>
                    <View style={[styles.slideContainer,styles.slide2]}>
                        <Text>Slide 2</Text>
                    </View>
                    <View style={[styles.slideContainer,styles.slide3]}>
                        <Text>Slide 3</Text>
                    </View>
                </Swiper>
            </View>
        )
    }
}

Loop? AutoPlay?

No. Just per-screen slider / swiper

Properties

Basic

Custom style

Swiper has the following structure

<View style={containerStyle}>
    <View style={swipeAreaStyle}>
        <View style={swipeWrapperStyle}>
            ...
        </View>
        <View style={controlsWrapperStyle}>
            {prevButtonElement || <Text style={prevButtonStyle}>{prevButtonText}</Text>}
            <View style={dotsWrapperStyle}>
                {dotElement || <View style={dotStyle}/>}
                //or
                {activeDotElement || <View style={activeDotStyle}/>}
            </View>
            {nextButtonElement || <Text style={nextButtonStyle}>{nextButtonText}</Text>}
        </View>    
    </View>
</View>

You can override any style

GitHub