Elegant Smooth Slider

#

Elegant Smooth Slider is a customizable image slider component for React applications. It allows you to display an array of images with various details and provides a smooth sliding effect.

Component Preview

Table of Contents

• Installation
• Usage
• Props
• License

  Installation

You can install this package using npm:

npm install elegant-smooth-slider

Or using yarn

yarn add elegant-smooth-slider

Usage

import React from 'react';
import ElegantSmoothSlider from 'elegant-smooth-slider';

const data = [
    { 
        img: "https://elegant-smooth-slider/img1.jpg", 
        title: "Elegant Smooth Slider ", description: "Elegant Smooth Slider is a customizable image slider component", 
        link: "https://elegant-smooth-slider/" 
    },

];

const App = () => {
  return (
    <div>
      <ElegantSmoothSlider 
        slides={data}
        automatedSlides={true}      {* Slide automated or not *}
        automatedDelay= {3}   {* Delay time in seccond ( if you want)*}
        slideButtonBackground="#e6e6e6"
        slideButtonIconColor="#000000"
        slideButtonBackgroundHover="#cccccc"
        slideButtonIconColorHover="#333333"
        buttontype="primary"        {* 'primary'  or  'secondary' *}
        imageTint={true}
        slidArrowButton={true}
        slideContent={true}
        contentTitle={true}
        contentDescription={true}
        contentLink={true}
        contentTitleColor="#f0f0f0"
        contentDescriptionColor="#f0f0f0"
        linkButtonColor="#e6e6e6"
        linkButtonColorHover="#cccccc"
        linkButtonTextColor="#000000"
        linkButtonTextColorHover="#333333"
        subImages={true}            
        subImagePosition="bottom"        {* 'bottom'  ,  'center' , 'top' *}
      />
    </div>
  );
};

export default App;

ElegantSmoothSlider (Props)

Slide Items Types

Example Of Array Of Data

    [
        { 
            img: "https://elegant-smooth-slider/img1.jpg", 
            title: "Elegant Smooth Slider ", description: "Elegant Smooth Slider is a customizable image slider component", 
            link: "https://elegant-smooth-slider/",
            buttonName: "See More",
            titleColor: "#e6e6e6"
            descriptionColor: "#e6e6e6"
        },

    ];