react-native-image-slider-carousel

1.2.0 • Public • Published

This is a custom image slider and carousel. Please reload the application to make it work more correctly when you make a change for this component. My build versions: 1- react-native-reanimated: 2.14.4

Installation

  npm install react-native-image-slider-carousel

Doc

react-native-reanimated

Usage

    import ImageCarousel from "react-native-image-slider-carousel";

    const imageData = [
        {
            image: {
            uri: "https://cdn.tommylife.com.tr/p-siyah-beyaz-bagcikli-yuksek-taban-suni-deri-erkek-spor-ayakkabi-89111-spor-ayakkabi-tommylife-t11er-89111-173162-32-O.jpg",
            },
            text: "Item 1",
        },
        {
            image: {
            uri: "https://st-vans.mncdn.com/mnresize/1500/1500/Content/media/ProductImg/original/637639363468969344.jpg",
            },
            text: "Item 2",
        },
        {
            image: {
            uri: "https://cdn.cimri.io/image/1000x1000/pumasmashvbuckerkeksporayakkabgri_208856385.jpg",
            },
            text: "Item 3",
        },
        {
            image: require("your local image path"),
            text: "Item 4",
        },
    ];

    <ImageCarousel
        data={imageData}
        square={false}
        autoChange={true}
        changeDuration={4000}
        loop={true}
        fullWidth={false}
        showIndex={false}
        showDots={true}
        bgColorContainer={"white"}
        imageBorderRadius={20}
        imageBorderWidth={0}
        imageBorderColor={"black"}
        indexContainMarginTop={0}
        dotContainMarginTop={0}
        dotColor={"#0081A6"}
        dotWidth={10}
        dotHeight={5}
        dotBorderRadius={10}
        onChange={(item, index) => {
            console.log("******");
            console.log("onChange : " + index);
            console.log("onChange : " + item.text);
        }}
        onPress={(item, index) => {
            console.log("******");
            console.log("onPress : " + index);
            console.log("onPress : " + item.text);
        }}
    />;

API

prop type description default
data List Image Data. "notFound.png"
square Boolean Image square. false
autoChange Boolean Image auto change. true
changeDuration Number Image auto change duration. 4000
loop Boolean Image loop. true
fullWidth Boolean Image fullWidth. false
showIndex Boolean Image index. false
showDots Boolean Image dots. true
bgColorContainer String Image container backgroundColor. "white"
imageBorderRadius Number Image borderRadius. 20
imageBorderWidth Number Image borderWidth. 0
imageBorderColor String Image borderColor. "black"
indexContainMarginTop Number Image index marginTop. 0
dotContainMarginTop Number Image dots marginTop. 0
dotColor String Image dots color. "#0081A6"
dotWidth Number Image dots width. 10
dotHeight Number Image dots height. 5
dotBorderRadius Number Image dots borderRadius. 10

Package Sidebar

Install

npm i react-native-image-slider-carousel

Weekly Downloads

1

Version

1.2.0

License

ISC

Unpacked Size

18.8 kB

Total Files

6

Last publish

Collaborators

  • yigithan10