Ab Slide Ease

Ab Slide Ease is a seamless and easy-to-use React slider library designed for smooth and flexible web interfaces. It allows you to create a responsive image slider with minimal configuration.

Features

• Smooth slide transitions from right to left
• Automatic slide transitions with customizable intervals
• Navigation buttons for manual slide control
• Dots for slide navigation
• Fully responsive design

Installation

Install the library using npm:

npm install ab-slide-ease

Usage

To use Ab Slide Ease in your React project, follow the steps below:

1. Import the Component and CSS First, import the AbSlideElse component and the accompanying CSS file.

import showSlider from 'ab-slide-ease';

2. Provide Slide Data Prepare an array of slide data, each containing an image URL and a caption.

const images = [
  'path/to/image1.jpg', 
  'path/to/image2.jpg', 
  'path/to/image3.jpg', 
];

3. Use the Component in Your JSX Use the AbSlideElse component in your JSX and pass the slide data and optional interval prop.

const App = () => {
  return (
    <div>
      <button onClick={() => showSlider(images, 2000)}>Show Slider </button>
    </div>
  );
};

export default App;

Example Here's a complete example:

import React from 'react';
import showSlider from 'ab-slide-ease';

const images = [
  'path/to/image1.jpg', 
  'path/to/image2.jpg', 
  'path/to/image3.jpg', 
];

const App = () => {
  return (
     <div>
      <button onClick={() => showSlider(images, 2000)}>Show Slider </button>
    </div>
  );
};

export default App;

License

This project is licensed under the Apache-2.0 License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub AB Slide Ease.