Slider Component
Slider Component is a React component that allows you to create a simple image slider with navigation.
Features
- Navigation with previous and next buttons.
- Zoom in to view images in full size.
- Smooth scrolling for seamless image transitions.
Installation
You can install the component via npm or yarn:
npm install react-slider-button
or
yarn add react-slider-button
Usage
import React from 'react';
import SliderComponent from 'react-slider-button';
const images = [
{ name: 'image1.jpg' },
{ name: 'image2.jpg' },
// add more images as needed
];
const App = () => {
return (
<SliderComponent
images={images}
prevButton={<span>Previous</span>}
nextButton={<span>Next</span>}
prevButtonStyle={{ background: 'red' }} // optional style for previous button
nextButtonStyle={{ background: 'green' }} // optional style for next button
/>
);
};
export default App;
Make sure to adjust the images
property with the list of images you want to display in the slider.
Props
-
images
: Array of Objects (required) - List of images to be displayed in the slider. -
prevButton
: React Element (optional) - Button for navigating to the previous image. -
nextButton
: React Element (optional) - Button for navigating to the next image. -
prevButtonStyle
: Object (optional) - Additional styles for the previous button. -
nextButtonStyle
: Object (optional) - Additional styles for the next button.