npm package: @pimred/carousel
Description: React carousel
Author: Mirsen Mislimi
Latest version: 0.1.3

# @pimred/carousel

## Installation 

`npm install @pimred/carousel`

## Usage

Basic example

```jsx
import Carousel from '@pimred/carousel'

const MyComponent = () => {
  return (
    <Carousel>
      ...
    </Carousel>
  )
}
```
### You can use component with hocs

```jsx
import { Carousel as _Carousel, withArrows, withAutoplay, withBaseHoc, withDots } from '@pimred/carousel'

const Carousel = withBaseHoc(withAutoplay(withDots(withArrows(_Carousel))))

const MyComponent = () => {
  return (
    <Carousel>
      ...
    </Carousel>
  )
}
```
![Carousel basic](https://res.cloudinary.com/pim-red/image/upload/v1650371447/pimred-npm-packages/carousel/carousel_basic.gif)

Props you can send to Carousel
| Option name           | Type        | Required    | Default     | Description                                                                                                     |
| ------------------    | ----------- | ----------- | ----------- | --------------------------------------------------                                                              |
| activePage            | Number      | no          | 1           | If you want your slider to start from specific page                                                             |
| disableDots           | Bool        | no          | false       | To disable dots on every display size (desktop, mobile)                                                         |
| disableDotsOnMobile   | Bool        | no          | false       | To disable dots only on mobile                                                                                  |
| disableArrows         | Bool        | no          | false       | To disable arrows on every display size (desktop, mobile)                                                       |
| disableArrowsOnMobile | Bool        | no          | false       | To disable arrows only on mobile                                                                                |
| arrowLeftStyle        | Object      | no          | {}          | Inline style for left arrow, this will append to default style                                                  |
| arrowRightStyle       | Object      | no          | {}          | Inline style for right arrow, this will append to default style                                                 |
| arrowsClassName       | CSS class   | no          | ''          | CSS, SCSS classname which will override existing style                                                          |
| delay                 | Number      | no          | 3000        | Delay between slides if hoc autoPlay is included                                                                |
| stopAutoplay          | Bool        | no          | false       | To stop autoplay (e.g. if you have modal and you want to stop when modal is opened)                             |

## Example override values
File App.js
```jsx
import React from 'react'
import { Carousel as _Carousel, withArrows, withAutoplay, withBaseHoc, withDots } from '@pimred/carousel'
import '@pimred/carousel/dist/index.css'

import './App.css'
import { items } from './items'

const Carousel = withBaseHoc(withAutoplay(withDots(withArrows(_Carousel))))

function App () {
  const slides = items.map((item, index) => {
    return (
      <div
        key={`slider-item-${index}`}
      >
        <img
          src={item.secureUrl}
          width={item.width}
          height={item.height}
        />
      </div>
    )
  })
  return (
    <div className='App'>
      <h1>Example 2</h1>
      <div className='cover-slider-override'>
        <CarouselOneItem>
          {slides}
        </CarouselOneItem>
      </div>
    </div>
  )
}

export default App
```
File items.js
```jsx
export const items = [
  {
    secureUrl : 'https://picsum.photos/1200/600',
    width     : 1200,
    height    : 600
  },
  {
    secureUrl : 'https://picsum.photos/1000/500',
    width     : 1000,
    height    : 500
  },
  {
    secureUrl : 'https://picsum.photos/1100/550',
    width     : 1100,
    height    : 550
  },
  {
    secureUrl : 'https://picsum.photos/1020/510',
    width     : 1020,
    height    : 510
  },
  {
    secureUrl : 'https://picsum.photos/1000/500',
    width     : 1000,
    height    : 500
  },
  {
    secureUrl : 'https://picsum.photos/900/450',
    width     : 900,
    height    : 450
  },
  {
    secureUrl : 'https://picsum.photos/940/470',
    width     : 940,
    height    : 470
  },
  {
    secureUrl : 'https://picsum.photos/1140/570',
    width     : 1140,
    height    : 570
  },
  {
    secureUrl : 'https://picsum.photos/1160/580',
    width     : 1160,
    height    : 580
  },
  {
    secureUrl : 'https://picsum.photos/1040/520',
    width     : 1040,
    height    : 520
  },
  {
    secureUrl : 'https://picsum.photos/1060/530',
    width     : 1060,
    height    : 530
  },
  {
    secureUrl : 'https://picsum.photos/1080/540',
    width     : 1080,
    height    : 540
  }
]
```
File App.css
```css
img {
  width  : 100%;
  height : auto;
}

.cover-slider-override .pimred-slider-carousel-item {
  align-self  : end;
  width       : 100%;
  /* scroll-snap-align: center; */ /* Enable this for centering slides on change*/
}

.cover-slider-override .pimred-slider-dot {
  height            : 5px;
  width             : 30px;
  background-color  : #bbb;
  display           : inline-block;
  cursor            : pointer;
  border-radius     : 0;
}

.cover-slider-override .pimred-slider-dot-active {
  background-color: white;
}

.cover-slider-override .pimred-slider-dots {
  margin-top  : -60px;
  position    : relative;
}

.cover-slider-override .pimred-slider-left-arrow-icon {
  background-color  : transparent;
  cursor            : pointer;
}

.cover-slider-override .pimred-slider-right-arrow-icon {
  background-color  : transparent;
  cursor            : pointer;
}

.cover-slider-override .pimred-slider-left-arrow {
  padding-left: 40px
}

.cover-slider-override .pimred-slider-right-arrow {
  padding-right: 40px
}

.cover-slider-override .pimred-slider-right-arrow:hover svg {
  stroke: white;
}
.cover-slider-override .pimred-slider-right-arrow:hover {
  cursor: pointer;
}

.cover-slider-override .pimred-slider-left-arrow:hover svg {
  stroke: white;
}
.cover-slider-override .pimred-slider-left-arrow:hover {
  cursor: pointer;
}

.cover-slider-override svg {
  stroke: #bbb;
}
```
![Carousel with hocs](https://res.cloudinary.com/pim-red/image/upload/v1650372259/pimred-npm-packages/carousel/carousel_with_hocs.gif)
## Example override values items per page
```scss
// Function for calculating items per page
@function getWidth($perPage: 1, $marginLeft: 3) {
  $result: (math.div(100, $perPage) - $marginLeft) + math.div($marginLeft, $perPage);
  @return $result;
}
/*
javascript syntax for function
const getWidth = (perPage = 1, marginLeft = 3) => {
  return ( ( 100 / perPage ) - marginLeft ) + ( marginLeft / perPage )
}
*/
.pimredMl3 {
  margin-left: 3%;
}
@media (min-width: 576px) {
  .pimredCarouselItem {
    width: 100%;
    // getWidth(1, 3); One item per page, 3 because marginLeft
  }
}

@media (min-width: 768px) {
  .pimredCarouselItem {
    width: 48.5%;
    // getWidth(2, 3); Two items per page, 3 because marginLeft
  }
}

@media (min-width: 992px) {
  .pimredCarouselItem {
    width: 31.33%;
    // getWidth(3, 3); Three items per page, 3 because marginLeft
  }
}

@media (min-width: 1200px) {
  .pimredCarouselItem {
    width: 17.6%;
    // getWidth(5, 3); Five items per page, 3 because marginLeft
  }
}
```
## Development

First, build the dist files\
`npm run build`

Then, publish to npm\
`npm publish --access public`