import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Image
} from "react-native";

import Swiper from "react-native-swiper";

export default class Swipers extends Component {
  render() {
    return (
       <View style={styles.content}>
        <View style={styles.Carousel}>
          <Swiper style={styles.wrapper} autoplay autoplayTimeout={2}
          paginationStyle={{bottom: 3}}>
            <View style={styles.slide}>
              <Image
                source={{
                  uri:
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
                }}
                style={styles.img}
              />
            </View>
            <View style={styles.slide}>
              <Image
              source={{
                  uri:
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
                }}
              style={styles.img}
              />
            </View>
          </Swiper>
        </View>
       </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    width: '100%',
    backgroundColor: "#fff",
    marginTop: 5,
    padding: 10
  },
  Carousel: {
    width: '100%',
    height: 153,
    borderRadius: 10,
    overflow: 'hidden'
  },
  wrapper: {
    width: '100%'
  },
  slide: {
    width: '100%',
    height: 153,
    justifyContent: 'center',
    alignItems: 'center'
  },
  img: {
    width: "100%",
    height: "100%"
  }
});