@pimred/carousel

Installation

npm install @pimred/carousel

Usage

Basic example

import Carousel from '@pimred/carousel'

const MyComponent = () => {
  return (
    <Carousel>
      ...
    </Carousel>
  )
}

You can use component with hocs

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

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

const MyComponent = () => {
  return (
    <Carousel>
      ...
    </Carousel>
  )
}

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

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

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

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;
}

Example override values items per page

// 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