react-native-carousel-image-slider

KO | EN

gitlite — search

#python #ai #go #android #machine-learning #rust #nodejs #macos #windows #awesome #kubernetes #security #ios #openai

react-native-carousel-image-slider

(★ 22)

A simple and fully customizable React Native Carousel Slider component, support to IOS and Android.

react-native-carousel-image-slider 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🎠 React Native Carousel Image Slider

[![npm version](https://img.shields.io/npm/v/react-native-carousel-image-slider.svg?style=flat-square)](https://www.npmjs.com/package/react-native-carousel-image-slider)
[![npm downloads](https://img.shields.io/npm/dm/react-native-carousel-image-slider.svg?style=flat-square&color=success)](https://www.npmjs.com/package/react-native-carousel-image-slider)
[![GitHub stars](https://img.shields.io/github/stars/GusttavoCastilho/react-native-carousel-image-slider?style=flat-square&color=success)](https://github.com/GusttavoCastilho/react-native-carousel-image-slider)
[![GitHub issues](https://img.shields.io/github/issues/GusttavoCastilho/react-native-carousel-image-slider?style=flat-square&color=blue)](https://github.com/GusttavoCastilho/react-native-carousel-image-slider/issues)
[![GitHub PRs](https://img.shields.io/github/issues-pr/GusttavoCastilho/react-native-carousel-image-slider?style=flat-square&color=blue)](https://github.com/GusttavoCastilho/react-native-carousel-image-slider/pulls)
[![License](https://img.shields.io/github/license/GusttavoCastilho/react-native-carousel-image-slider?style=flat-square)](https://github.com/GusttavoCastilho/react-native-carousel-image-slider/blob/main/LICENSE)

A modern, customizable, and high-performance carousel slider component for React Native applications. Perfect for showcasing images, banners, or any content that needs a smooth sliding experience.

</div>

## ✨ Features

- 🎯 Fully customizable
- 📱 iOS and Android support
- 🎨 Customizable dots and styling
- 🔄 Auto-play functionality
- ♾️ Infinite loop support
- 🖼️ Custom image component support
- ⚡️ High performance
- 📦 Zero dependencies
- 🔍 TypeScript support

## 📋 Requirements

- React Native >= 0.72.0
- React >= 18.0.0

## 🚀 Installation

```bash
# Using npm
npm install react-native-carousel-image-slider

# Using yarn
yarn add react-native-carousel-image-slider
```

## 🎮 Basic Usage

### Function Component Example

```jsx
import React, { useState } from "react";
import { View } from "react-native";
import { CarouselSlider } from "react-native-carousel-image-slider";

export default function App() {
  const [images, setImages] = useState([]);

return (
    <View style={{ width: "100%", flex: 1, padding: 24 }}>
      <CarouselSlider images={images} />
    </View>
  );
}
```

### Class Component Example

```jsx
import React from "react";
import { View } from "react-native";
import { CarouselSlider } from "react-native-carousel-image-slider";

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [],
    };
  }

render() {
    return (
      <View style={{ width: "100%", flex: 1, padding: 24 }}>
        <CarouselSlider images={this.state.images} />
      </View>
    );
  }
}
```

## 🎨 Advanced Usage

### Using Local Images

```jsx
import React from "react";
import { View } from "react-native";
import { CarouselSlider } from "react-native-carousel-image-slider";

export default function App() {
  const images = [
    require('./assets/image1.jpg'),
    require('./assets/image2.jpg'),
    require('./assets/image3.jpg'),
  ];

return (
    <View style={{ width: "100%", flex: 1, padding: 24 }}>
      <CarouselSlider images={images} />
    </View>
  );
}
```

### Using Custom Image Component

```jsx
import React from "react";
import { View, Image, Text } from "react-native";
import { CarouselSlider } from "react-native-carousel-image-slider";

export default function App() {
  const images = [
    { uri: 'https://example.com/image1.jpg', title: 'Image 1' },
    { uri: 'https://example.com/image2.jpg', title: 'Image 2' },
  ];

const CustomImage = (item, index) => (
    <View>
      <Image source={{ uri: item.uri }} style={{ width: 300, height: 200 }} />
      <Text>{item.title}</Text>
    </View>
  );

return (
    <View style={{ width: "100%", flex: 1, padding: 24 }}>
      <CarouselSlider 
        images={images}
        customImageComponent={CustomImage}
        autoPlay={true}
        autoPlayInterval={2000}
      />
    </View>
  );
}
```

## 📚 Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `images` | Array | required | Array of image sources (URL strings or require() objects) |
| `renderDots` | boolean | true | Whether to show pagination dots |
| `onImagePress` | function | undefined | Callback when an image is pressed |
| `activeDotColor` | string | 'red' | Color of the active dot |
| `inactiveDotColor` | string | 'gray' | Color of inactive dots |
| `dotStyle` | ViewStyle | undefined | Custom style for dots |
| `dotSize` | number | 8 | Size of the dots |
| `dotSpacing` | number | 4 | Spacing between dots |
| `resizeMethod` | 'auto' \| 'resize' \| 'scale' | 'auto' | Image resize method |
| `resizeMode` | ImageResizeMode | 'cover' | Image resize mode |
| `imageStyle` | ImageStyle | undefined | Custom style for images |
| `disabledOnPress` | boolean | false | Disable image press |
| `buttonActiveOpacity` | number | 1 | Opacity when pressing images |
| `autoPlay` | boolean | false | Enable auto-play |
| `autoPlayInterval` | number | 3000 | Interval between auto-play slides (ms) |
| `loop` | boolean | true | Enable infinite loop |
| `customImageComponent` | function | undefined | Custom component to render images |
| `containerStyle` | ViewStyle | undefined | Custom style for the container |
| `imageContainerStyle` | ViewStyle | undefined | Custom style for the image container |
| `dotsContainerStyle` | ViewStyle | undefined | Custom style for the dots container |
| `showNavigationButtons` | boolean | false | Show navigation buttons |
| `navigationButtonColor` | string | '#fff' | Color of navigation buttons |
| `navigationButtonSize` | number | 30 | Size of navigation buttons |
| `swipeEnabled` | boolean | true | Enable swipe gestures |
| `bounceEnabled` | boolean | true | Enable bounce effect |
| `scrollEnabled` | boolean | true | Enable scroll |
| `overlayStyle` | ViewStyle | undefined | Custom style for image overlay |
| `captionStyle` | ViewStyle | undefined | Custom style for image caption container |
| `captionTextStyle` | TextStyle | undefined | Custom style for caption text |
| `loadingIndicator` | ReactNode | undefined | Custom loading indicator component |
| `errorComponent` | ReactNode | undefined | Custom error component |
| `onSlideChange` | function | undefined | Callback when slide changes |
| `onScroll` | function | undefined | Callback during scroll |
| `onScrollBegin` | function | undefined | Callback when scroll begins |
| `onScrollEnd` | function | undefined | Callback when scroll ends |
| `initialIndex` | number | 0 | Initial slide index |
| `windowSize` | number | 3 | Number of slides to keep in memory |
| `maxToRenderPerBatch` | number | 3 | Maximum number of slides to render per batch |
| `updateCellsBatchingPeriod` | number | 50 | Period for updating cells |
| `accessibilityLabel` | string | undefined | Accessibility label |
| `accessibilityHint` | string | undefined | Accessibility hint |
| `accessibilityRole` | string | 'image' | Accessibility role |
| `aspectRatio` | number | undefined | Image aspect ratio |
| `height` | number | undefined | Custom height for images |
| `width` | number | undefined | Custom width for images |
| `longPressEnabled` | boolean | false | Enable long press gesture |
| `onLongPress` | function | undefined | Callback for long press gesture |

## 🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 👨‍💻 Author

- **Gustavo Castilho** - [GitHub](https://github.com/GusttavoCastilho)

## ⭐️ Show your support

Give a ⭐️ if this project helped you!

react-native-carousel-image-slider

react-native-carousel-image-slider 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-carousel-image-slider

react-native-carousel-image-slider 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README