Introduce additional props, to stop autoplay when a pointer is over the carousel.

Describe the bug
Thumbnails classes are not applied when user goes into negative value with infinite scroll.

To Reproduce
https://codesandbox.io/s/x3k64q47qq
Press left arrow repeatedly to see the problem.

Expected behavior
Classes are applied to dot components all the time or there could be an option to disable them entirely.

Hi there, I implement a close button in the carousel. I set the onClick event for that close button. The onClick event does not fired when I try to make it work on mobile.
Please tell me the solution or workaround.
Best regards,
Suguru

Is your feature request related to a problem? Please describe.
If the container element changes width the slider and controls respond, but the slide width and height remains the same. This cuts off images when reducing the width and when increasing the width you see multiple slides at a time.

Describe the solution you'd like
It would be great if there was a way to recalculate the size of the slides via the api.

Describe alternatives you've considered
I wondered if there was a React way to force the carousel to re-render that would trigger the calculations again, but I was unable to come up with a solution.

Additional context
I'm using this in the WordPress Gutenberg editor to create a custom slider block. In Gutenberg there are alignment options (full width, wide, default, etc...) that allow you to change the width of your block/content and I'd like to have the slider update when the alignment is changed without having to reload the page.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Create a carousel with 5 items
2. Pass following props:

<Carousel
  ...
  dots
  slidesPerPage={2}
  slidesPerScroll={2}
>

3. Keep changing active slides
4. Notice the order of active dots (it's repeatable 1, 3, 5, 2, 4)

Expected behavior
Probably active dots should be calculated differently for this kind of situation.

Screenshots

Desktop (please complete the following information):

• OS: [macOS 10.14.6]
• Browser [Chrome]
• Version [79.0.3945.88]

I have a big issue, when the carousel renders, it breaks down, and when I check the element's width, I see a very large scale which is not logical

This is urgent for me to fix this, please inform me if there is any solution

Hello,
I started using react-carousel a week ago.. and suddenly we realized our all application is broken.
React-Select, one of the most popular libraries, is getting broken.

Just adding the bare tag <Carousel/> to the page, makes react-select components to not be able to open. they get opened and closed immediately.

removing the tag resolves it.

I don't know why this is happening, but it does.. and I think its a huge bug as it means a lot o website will be broken when start using react-carousel.

Describe the bug
When using infinite scroll in the carousel it renders large amount of unnecessary DOM elements.

To Reproduce
https://codesandbox.io/s/x3k64q47qq

Expected behavior
DOM elements should be removed when they are not needed.

Additional context
I'm currently using react-slick to render infinite carousel that contains slides that display information and buttons that allow interaction with the application. If I switch to this library, rendering these components many times could have bad implications on the performance.

One of the solutions that I was thinking about was to use react-virtualized or react-window to efficently render slides, but I could not find a way to achieve infinite scroll with them.

Describe the bug
When using the library with google maps API, google map touch behavior becomes broken. For example, it doesn't matter what options you supply to google maps (like gestureHandling), it won't work as expected on touch devices if <Carousel /> is present somewhere inside the code.

To Reproduce

1. Use simple https://github.com/adrianmcli/nano-react-app
2. Install the library and add google maps API
3. Insert <Carousel /> component and init google map
4. See the problem on touch devices (also with chrome dev tools)

Repo to reproduce: https://github.com/shelooks16/react-carousel-touch-issue
replace const api = "API-KEY"; with a google-api key

Expected behavior
To not broke google map touch behavior?

Screenshots

I deployed 2 web-pages:
carousel imported: https://with-imported-carousel-issue.surge.sh/
carousel is not imported: https://without-imported-carousel-issue.surge.sh/

Additional context
Tried with carousel v1.10.27 and v1.10.20. React v16.9.0

Replace https://github.com/gemini-testing/gemini with https://github.com/gemini-testing/hermione as gemini is deprecated.

Describe the bug
Carousel doesn't stop dragging when mouseup event is triggered outside of carousel container.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://brainhubeu.github.io/react-carousel/docs/examples/simpleUsage
2. Start dragging the carousel
3. While still pressing the button move the cursor outside of carousel container
4. Release the button
5. Notice carousel is still dragging while you're not pressing the button

Expected behavior
Carousel should stop dragging when releasing the button (no matter if it's in the container or not).

Screenshots

Desktop (please complete the following information):

• OS: [macOS 10.14.6]
• Browser [Chrome]
• Version [79.0.3945.88]

Is your feature request related to a problem? Please describe.

When working with a non-infinite carousel the left arrow shows up when the carousel is at position 0. This leads to bad ux since you can scroll to the left any farther behind index 0.

Similarly when you are at, or close to the end of the list (ie there is no more pages beyond the last card) the right arrow still appears.

Describe the solution you'd like
This to automatically be handled

Describe alternatives you've considered
I've made a function that passes in the arrow props dynamically for now which is working great, but this seems like it could be a built in feature.

To reproduce: sliding on the multiple items doc demos on Safari on an iPhoneX doesn't work. Single items work as long as you're not zoomed.

Some users are experiencing this issue, latest version.
Not sure how to reproduce, maybe add a null check before accessing it?
Happens here:

When attempting to scroll a carousel using touch on mobile, it breaks the carousel and causes an error. This is visible on the demo site: https://brainhubeu.github.io/react-carousel/docs/examples/responsive/

See screenshot:

Tested on Chrome Mac, Chrome Android (Pixel 3) and Safari iOS (iPad).

Hi there,

it seems that when you add a form or input to a slide (div) you are not actually able to type anything into the boxes (clicking does nothing).

Thanks, Calvin.

Describe the bug
When I rebuild the lib (b292ec4849eea5c9c95fe658e35d9a8491434dea) and add it to my website, the slider doesn't move.

To Reproduce
Steps to reproduce the behavior:
yarn run build and add it to your website

Expected behavior
The carousel should move

Screenshots
🤷‍♀️

Desktop (please complete the following information):
any

Smartphone (please complete the following information):
any

Additional context
When I revert 91f80fa5d2ea11c915bdbadffff50cb7bf859067, it works again.

We have already some tests but we need tests satisfying the following requirements:

• checking each demo case
• checking OS/ browsers (the newest version of browser and the newest version of OS):
  • Safari for Mac OS
  • Chrome for Mac OS
  • Edge for Windows
  • Chrome for Windows
  • Safari for iOS (iPhone and iPad)
  • Chrome for Android (Samsung Galaxy and Samsung Galaxy Tab)
• checking images size
• checking images/ thumbnails/ buttons location
• checking whether the image isn't cut
• checking whether the space for clicking is large enough which is important especially for mobile devices in order to be able to be touched with a finger
• checking animation speed

We got the following error on a project using https://www.npmjs.com/package/react-styleguidist

Cannot read property 'NODE_ENV' of undefined

The error made the Styleguide not usable.

After some investigation, we have found that the error appeared after we added @brainhubeu/react-carousel to the project.

I guess the issue does not come from @brainhubeu/react-carousel, but from some of the dependencies. Because there is no NODE_ENV usages in react-carousel/src. But it's really hard to find the true source of the error.

Anyway, I have found a quick solution here: webpack/webpack#2446 (comment)

Will provide a PR.

To reproduce the error, clone https://github.com/Leksat/react-carousel-test, run yarn && yarn styleguidist build, and open index.html in the generated styleguide directory.

This project was setup as follows:

yarn init --yes
yarn add react-styleguidist @brainhubeu/react-carousel webpack react react-dom
# add default styleguide.config.js
# create a react component and import @brainhubeu/react-carousel into it

To reproduce that case just add dir="rtl" to tag.

When infinite option is turned on, dots will scroll to indexes 0-n (where n is index of last element). When current index is very large (in case of autoplay value is being incremented so it can be any large number) clicking on dot or thumbnail will make carousel animate through all those values instead of to the nearest one.

I see two solutions:

1. Just calculate nearest one in Dots component
2. Make mechanism to reset value in case of infinite (can be tricky as this is controlled component: triggering onChange, will in turn trigger state change and Carousel will have difficult time figuring out if the change was just it's resetting mechanism and animation is unnecessary or it's triggered from outside and we should animate)

Hey there, It seems like the carousel globally prevents click/touch events for events outside (or inside the component). It'd also be nice if dragging had to be initiated inside the carousel so that scrolling didn't also move the slides

Hello,

Trying to implement but running into a roadblock.

Goal:

1. To have a carousel hold multiple cards, and have those cards fit neatly in the space provided.
2. The card width would be a percentage based on the number of slidesPerPage.
3. The first index position would ALWAYS line up at the left edge of the carousel space.

Current behavior:

• With infinite on: the cards never line up neatly on the left edge. Even with centered turned off.
• Without infinite on: the cards start lined up on the left edge, but do not stay that way when slid over.

<Carousel
        addArrowClickHandler
        arrowLeft={ <ArrowButton className={ className_arrows }><KeyboardArrowLeft/></ArrowButton> }
        arrowRight={ <ArrowButton className={ className_arrows }><KeyboardArrowRight/></ArrowButton> }
        centered={ false }
        infinite
        slides={ slides }
        slidesPerPage={ 2 }
        >

Thanks for your hard work.

Describe the bug
Wrong active thumb item

To Reproduce
Use the Carousel with thumbs and set the first active by default
Then you will see that all thumbs are "active/selected" (check CSS class)

Expected behavior
I would have expected that only the first thumb was active/selected

Additional context
In CarouselDots.js component the method "calculateButtonValue " is wrong., especially these lines:
return this.props.value >= 0
? this.props.value
: this.props.value + numberOfSlides * Math.ceil(Math.abs(this.props.value/numberOfSlides));

Indeed, the line this.props.value >= 0 will always return true... so all thumbs will be selected.

Can you please fix it?

Regards,

while swiping on mobile, the page slides up and down at the same time as the carousel moving left (or right).

It'd be great to be able to lock down the vertical scrolling while horizontal movement is happening. Any suggestions?

Please kindly test with mobile. you will be realised the issue.

Thanks.

When using on react 16.2.0 the error below is thrown:
ERROR in ./node_modules/@brainhubeu/react-carousel/lib/style.css [0] Module parse failed: Unexpected token (1:0) [0] You may need an appropriate loader to handle this file type.

The IDE shows the following warning:

[ts] Could not find a declaration file for module '@brainhubeu/react-carousel'. '/path_to_project/node_modules/@brainhubeu/react-carousel/lib/react-carousel.js' implicitly has an 'any' type.

This is simple usage by following the instructions on https://brainhubeu.github.io/react-carousel/docs/gettingStarted

Is your feature request related to a problem? Please describe.
Typescript
After module is installed, add line declare module '@brainhubeu/react-carousel'; to file with .d.ts extension.

This is not helpful because what would be better is actual ts definitions or writing the library in ts.

Describe the solution you'd like
A d.ts file added to the solution

Describe alternatives you've considered
Other carousel libraries.

Add an option to set width of an element (disabling default calculating width from carousel width and number of visible elements) and offset between them.
Things to consider:

• Should offset be aways visible or first's left and last's offsets should be offscreen (maybe another prop to control it?
• Can offset be turned on without setting width (I think yes, I don't see any possible issues with it. Are there any?)

when drag the carousel, it always trigger click link if the slide items is anchor tag

Library uses deprecated method (componentWillReceiveProps) to turn animation on and off (depending on the actual change of carousel value prop). We should implement it using e.g. getDerivedStateFromProps or some other method.

To Reproduce
Steps to reproduce the behavior:

1. Open https://brainhubeu.github.io/react-carousel/docs/examples/clickToChange with Safari on iOS (iPhone) so there are three photos and the code is following:

<Carousel
  clickToChange
  slidesPerPage={2}
  centered
>
 <img src={imageOne} />
 <img src={imageTwo} />
 <img src={imageThree} />
</Carousel>

2. Set the screen to be vertical (default for iPhone) so the screen width is very low.
3. Try to click on the most left photo.
4. It's impossible to select the most left photo.
5. Click the most right photo.
6. The most right photo occupies all the carousel.
7. So the only way to show the center photo is to drag.
8. After dragging, the center photo is shown but not fully.

Expected behavior
4. It should be possible to select the most left photo.
6. The most right photo should occupy most of the carousel but there should be also a space for the center photo, enabling clicking it.
7. It should be possible to show the center photo not only with dragging but also with clicking it.
8. The center photo should be shown fully, with some space for the most left and the most right photo, enabling clicking them.

No photo should be cut or shrunk horizontally.

Instead, the height of the entire carousel should be decreased when needed in order to fit always the selected image and parts of its neighbors, enabling to click them.

Screenshots
Video: https://drive.google.com/file/d/1gkDYx8qPymJh8PKLjNQ3UMp39n6vd_B4/view

Smartphone (please complete the following information):

• Device: iPhone 5s
• OS: iOS 12.4.4
• Browser: Safari (AFAIK Safari version is connected with the iOS version)
• react-carousel: 1.10.34

Say, that I have 8 cards, and 4 are displayed on the screen at once. When I have my 5th card selected, and if I reload my screen, it shows me the first 4 cards in view instead of the one that I had selected plus the subsequent cards.

Would be great to have this feature where the cards in current view is decided by the selected/active card.

P.S: Correct me if this feature already exists. I couldn't find it anywhere.

It would be a good idea to add inertial movement of the carousel as shown here:
https://labs.ft.com/ftscroller/examples/horizontalpaged.html

https://github.com/ftlabs/ftscroller

Looking at the current documentation it seems there is no way to create styled dots. Passing array of divs does not work:

https://codesandbox.io/s/38qqqjn4q

This is the outcome that I want to achieve:

Describe the bug
Swiping on carousel is not working and it's trowing a console error

To Reproduce
Steps to reproduce the behavior:

1. Go to Dots or Thumbnails example
2. Try to swipe
3. The error is present in the browser console, and swipe is not working properly (image is following the cursor).

Expected behavior
Carousel image is changed

Screenshots

Desktop (please complete the following information):

• Linux
• All. Tested in Chrome and Firefox
• All versions

Describe the bug
Number prop not respected on 'Dots' when thumbnails prop is supplied.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://brainhubeu.github.io/react-carousel/docs/examples/thumbnails
2. Click on change live example prop for Dots from this.state.thumbnails.length to "2"
3. Check thumbnails

Expected behavior
There should only be two thumbnails showing

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser All
• Version All

Looking at the Carousel props API documentation there is no "dots" prop that is shown in the simple dots section.

Is your feature request related to a problem? Please describe.
My carousel is not for images but rather containers that have links to other pages. On desktop the drag feature doesn't provide a great ux. It'd be great to have the draggable as an option and have the carousel controlled only by buttons if necessary

Describe the bug
The prop breakpoints is missing from the types definitions. Compilation fails with the following error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<CarouselProps>): default', gave the following error.
    Type '{ children: Element[]; centered: true; infinite: true; slidesPerPage: number; slidesPerScroll: number; stopAutoPlayOnHover: true; offset: number; autoPlay: number; value: number; onChange: (e: number) => void; breakpoints: { ...; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<default> & Readonly<CarouselProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'breakpoints' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<default> & Readonly<CarouselProps> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: CarouselProps, context?: any): default', gave the following error.
    Type '{ children: Element[]; centered: true; infinite: true; slidesPerPage: number; slidesPerScroll: number; stopAutoPlayOnHover: true; offset: number; autoPlay: number; value: number; onChange: (e: number) => void; breakpoints: { ...; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<default> & Readonly<CarouselProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'breakpoints' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<default> & Readonly<CarouselProps> & Readonly<{ children?: ReactNode; }>'.  TS2769

Expected behavior
The prop should be added to the types definitions file so that compilation works.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome, Firefox
• Version: @brainhubeu/react-carousel 1.10.27, @types/brainhubeu__react-carousel 1.10.0

[Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Describe the bug
Dots on the one of examples on a demo page are positioned badly.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://brainhubeu.github.io/react-carousel/docs/examples/simpleDots/
2. Look at the dots :)

Expected behavior
Dots should be placed below the carousel but they are placed on the right side.

Screenshots

Desktop (please complete the following information):

• OS: [macOS 10.14.6]
• Browser [Chrome]
• Version [79.0.3945.88]

It would be nice with a simple example of how to import and use react-carousel with TypeScript in the documentation.

Is your feature request related to a problem? Please describe.
First of all, awesome component. My main problem so far is this: I'm not sure why you have to supply the number of dots as a prop to this component. With Slick, for instance, this value is computed by the plugin. The number of dots is a particular pain point because that needs to change if slidesPerPage is changing per breakpoint.

Describe the solution you'd like
I'd like the component to compute these values for me.

Any thoughts? Happy to open a PR if no one can get to it.

Is there any possibility to make carousel vertical?

Hi i'm loving this carousel you guys made !! but it would be awesome in the future if you added support for styled components instead of using your css file.

Hi~ Thanks for a great package!

After searching breakpoints and itemWidth related issue, I may miss an approach to "clean up" some itemWidth settings via applying breakpoints.

e.g.
I would like to have width-fixed carousel card on pc and scale up it to 100% width on mobiles

<Carousel
    itemWidth={640}
    breakpoints={{
        767: {
            itemWidth: ??
        }
    }}> ...

Is it possible to use "null" or 0 to unset itemWidth?

We need this PR #91 to have a passing build.
Moreover, nothing can be broken, even if it's not covered by any test.

In order to contribute, please create a branch in your fork from renovate/major-all-dependencies and open a PR to renovate/major-all-dependencies.

Describe the bug
Dynamic slides do not work as intended with "infinite" prop.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/x3k64q47qq
2. Click on -/+ buttons on the first slide.
3. Click arrows to go from last slide to the first one.
4. Notice that the initial value can be seen before current value is set.

Expected behavior
There should be no visible change of the values when going back and forth on the carousel.

Screenshots

Additional context
I made an implementation that does not have this issue (based on https://medium.com/@incubation.ff/build-your-own-css-carousel-in-react-part-one-86f71f6670ca).

Later I'll upload demo to show how it could be implemented, although I am not sure if it would not cause big changes in the API.

I am looking for a carousel library that works correctly, but from ones that I have tested (Swiper, react-slick ) all suffer from the same problem. This may be a specific need that is not required for most users, but it would be nice to have if it does not introduce big breaking changes or need to rewrite big portions of the codebase.