Modules Images Slider for React v.1.0.0

ReactJS modules are simple but have many advantages, one of which is that you can customize them freely.

NPM Installation

npm install hy-image-slider-react

Example Project Implemented

// Add - Impport module //
import Slider from 'hy-image-slider-react';
//----//

const App = () => {
  return (
    <div>
    
      // Add - Default components //
      <Slider interval={1000} images={['banner-1.jpg', 'banner-1.jpg', 'banner-1.jpg']}/>
      //----//
      
    </div>
  );
};

export default App;

Customization

| Atribute | Key | Description | Status | |:--------------------------|:-----------|:-----------|:-----------| | images={key?} |['banner-1.jpg', 'banner-1.jpg', 'banner-1.jpg'] |Insert image (local/url) |Required | interval={key?} |500 1000 3000 etc... |Set interval time |Required | width={key?} |600 1000 1500 etc... |Set width (px) |Optional | height={key?} |600 1000 1500 etc... |Set height (px) |Optional | objectFit="key?" |fill contain cover scale-down none |Set Image Object |Optional | hoverStop={key?} |true false |Image stops on hover |Optional | borderRadius={key?} |0 10 25 etc... |Set corner radius image |Optional | hideButton={key?} |true false |Hide/Show button |Optional | buttonTextNext="key?" |Any text |Set text button (Next) |Optional | buttonTextPrev="key?" |Any text |Set text button (Prev) |Optional | classSlider="key?" |Use class css |CSS Slider Container |Optional | classImg="key?" |Use class css |CSS Slider images |Optional | classButtonMain="key?" |Use class css |CSS Slider Button Container |Optional | classButton="key?" |Use class css |CSS Slider Button |Optional

Full Customization

<Slider 
    classSlider="mycss-slider" 
    classImg="mycss-slider-image" 
    classButtonMain="mycss-slider-button-container"
    classButton="mycss-slider-button" 
    buttonTextPrev="Prev" 
    buttonTextNext="Next"
    hideButton={false}
    borderRadius={25}
    hoverStop={true}
    objectFit="cover"
    height={500}
    width={1000}
    interval={3000}
    images={['my-image-1.jpg', 'my-image-2.jpg', 'my-image-3.jpg']}
/>

Structural Components

<div classSlider="...">
    </img classImg="..." />
    <div classButtonMain="...">
        <button classButton="..." />
        <button classButton="..." />
    </div>
</div>

Happy Coding :)