react-native-my-custom-slider v1.0.1

React Native Image Slider

A lightweight and customizable React Native library for creating seamless horizontal image sliders with snap-to-center functionality and indicators. Ideal for enhancing your mobile app's user experience.

Features

• Horizontal image slider with smooth scrolling.
• Snap-to-center functionality for precise scrolling.
• Built-in pagination indicators.
• Simple and easy-to-use API.

Installation

Install the package via npm:

npm install react-native-image-slider

or using Yarn:

yarn add react-native-image-slider

Usage

Here’s how you can use the ImageSlider component in your project:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { ImageSlider } from 'react-native-image-slider';

const App = () => {
  const images = [
    { image: 'https://cdn.pixabay.com/photo/2024/12/20/11/53/architect-9280053_1280.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2024/11/24/06/33/fireworks-9220290_960_720.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2023/11/26/10/16/christmas-ball-8413268_1280.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2023/11/17/19/07/cookies-8394894_1280.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2024/12/26/08/19/ai-generated-9291566_960_720.png' },
  ];

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ImageSlider images={images} />
    </SafeAreaView>
  );
};

export default App;

Props

Example Images Prop Format

const images = [
  { image: 'https://example.com/image1.jpg' },
  { image: 'https://example.com/image2.jpg' },
  { image: 'https://example.com/image3.jpg' },
];

Customizing Styles

Currently, the ImageSlider is designed with predefined styles for convenience. You can fork and modify it to fit your custom design requirements.

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have any ideas or improvements.

License

This library is licensed under the MIT License.

Happy coding! 🚀