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
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 |