React carousel
npm install @pimred/carouselnpm install @pimred/carousel
Basic example
``jsx
import Carousel from '@pimred/carousel'
const MyComponent = () => {
return (
...
)
}
`$3
`jsx
import { Carousel as _Carousel, withArrows, withAutoplay, withBaseHoc, withDots } from '@pimred/carousel'
const Carousel = withBaseHoc(withAutoplay(withDots(withArrows(_Carousel))))
const MyComponent = () => {
return (
...
)
}
`
!Carousel basic
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) |
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 (
slider-item-${index}}
>
width={item.width}
height={item.height}
/>
export default App
`
File items.jsjsx`
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.csscss
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 hocsExample 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`