# react-infinite-image-link-carousel

> Its an infinite image slider with 3 images showing at a time for wonderful UI experience. Middle image is linked with href to go anywhere you wish for

Latest version **0.8.43** (published 2020-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-infinite-image-link-carousel
pnpm add react-infinite-image-link-carousel
yarn add react-infinite-image-link-carousel
bun add react-infinite-image-link-carousel
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.43 |
| Published | 2020-08-06 |
| First published | 2020-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Priyanka |
| Maintainers | 34priyanka |
| Keywords | react, infinite, image, slider, with, link |

## Links

- npm: https://www.npmjs.com/package/react-infinite-image-link-carousel
- Repository: https://github.com/priyankagupta34/react-infinite-image-link-carousel
- Homepage: https://github.com/priyankagupta34/react-infinite-image-link-carousel#readme
- Issues: https://github.com/priyankagupta34/react-infinite-image-link-carousel/issues
- npm.io page: https://npm.io/package/react-infinite-image-link-carousel

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.12.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.8.43 (latest) — 2020-08-06
- 0.8.42 — 2020-08-02
- 0.8.41 — 2020-07-27
- 0.8.40 — 2020-07-23
- 0.8.39 — 2020-06-24
- 0.8.38 — 2020-06-22
- 0.8.37 — 2020-06-22
- 0.8.36 — 2020-06-22
- 0.8.35 — 2020-06-22
- 0.8.34 — 2020-06-22
- 0.8.33 — 2020-06-22
- 0.8.32 — 2020-06-22
- 0.8.31 — 2020-06-22
- 0.8.3 — 2020-06-22
- 0.8.2 — 2020-06-22
- … 2 more at https://npm.io/package/react-infinite-image-link-carousel/versions

## README

# react-infinite-image-link-carousel

[![npm version][npm-main]][npm-main]
[![license][license]][license]
[![size][size]][size]
[![minsize][minsize]][minsize]


## Install

```bash
npm install react-infinite-image-link-carousel --save 
```

## Demo

<a href="https://imgflip.com/gif/45zovd"><img style="width: 100%;" src="https://i.imgflip.com/45zovd.gif" title="made at imgflip.com"/></a>


## Props

<small><b>I have kept minimal configurations. 
Less configurations Less confusions.</b></small>

<ul>
     <li>imageList: It should be an array of javascript objects.
     Each object with image and href properties. 'image' object should contain location, 
     href should contain link to image. Leave black or '#' if you don't want any links </li>
    <li>autoInfiniteSlider: Provide true if you want aut0 slide to happen else false is enough</li>
    <li>infiniteSlideTimeScaleInMs: Provide a timer after which image should move automatically.
    This is linked with 'autoInfiniteSlider'</li>
    <li>heightOfImage: This is height of image or corousel</li>
</ul>

<b> Minimum 5 images are required. From which a combination of 3 will be shown at a time. If image list is less than 5, than this package will not work the way it is designed for. </b>

## Example

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ReactInfiniteImageLinkCorousal from 'react-infinite-image-link-carousel'

class App extends React.Component {
      constructor(props) {
        super(props)

        // this is the format of imagelist required for this package
        // You need to provide image location, along with
        // the link you want to go to, else you can keep '#'
            
        this.state = {
            imgList: [
                { image: 'imgs/2.jpg', href: '#' },
                { image: 'imgs/5.jpg', href: '#' },
                { image: 'imgs/6.jpg', href: '#' },
                { image: 'imgs/7.jpg', href: '#' },
                { image: 'imgs/8.jpg', href: '#' },
                { image: 'imgs/9.jpg', href: '#' },
                { image: 'imgs/10.jpg', href: '#' }
            ]
        }
    }

    render() {
        return (
            <div>
                <ReactInfiniteImageLinkCorousal 
                    imageList={this.state.imgList}  // Imagelist in the above format is required, rest i'll take care
                    autoInfiniteSlider={false}         // True if you want auto-slide function else false
                    infiniteSlideTimeScaleInMs={5000}     // Mention totals seconda after which slide should happen
                    heightOfImage={'50vh'} />        // Height of images or corousel
            </div>
        )
    }

}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
```

**MIT Licensed**

#
:smiley:

[npm-main]: https://badge.fury.io/js/react-infinite-image-link-carousel.svg
[license]: https://img.shields.io/apm/l/react
[size]: https://img.shields.io/bundlephobia/min/react-infinite-image-link-carousel
[minsize]: https://img.shields.io/bundlephobia/minzip/react-infinite-image-link-carousel

---
_Source: https://npm.io/package/react-infinite-image-link-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._