sag1v/react-elastic-carousel

A flexible and responsive carousel component for react https://sag1v.github.io/react-elastic-carousel

react-elastic-carousel's Issues

Page/scroll gets error if children are updated

Describe the bug
If you update the children of the carousel after scrolling, then the active page is retained and can cause errors.

To Reproduce
Steps to reproduce the behavior:

1. Set children to 10 items
2. Click next until on the last page
3. Dynamically update children to 5 items (anything less than 9)
4. Click PREV arrow
5. See error: TypeError: child is undefined

Note: if using more than one element per page, then the current page may still work but show fewer elements,
e.g.

1. Set children to 10 items, page size 5
2. Click next (now on the last page, elements 5-10, [indices 4-9])
3. Dynamically update children to 7 items
4. See only last 2 items (since it was already scrolled past the first 5)

Expected behavior
First choice - updating children would automatically go to first page. (Current workaround is to set page in a parent component using ref.goTo() function when updating children)

Second choice: changing pages has a max index. (e.g. if index >= children list size, then set to grab highest index)

Screenshots
React viewer shows error:
TypeError: child is undefined

convertChildToCbObj = index => {
  const { children } = this.props;
  const child = children[index]
  return { item: child.props, index };
};

(error at line 4: child.props)

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 60.9.0esr (32-bit)

Smartphone (please complete the following information):
N/A

Additional context
N/A

variableWidth for Slider

Is your feature request related to a problem? Please describe.
I am trying to display more than one (<2) items in the carousel which is a quite common trend nowadays. This is very similar to variableWidth feature in react-slick. An example sandox link. In react-elastic-carousel's case, either it won't show more than one item at a time or something breaks after reaching the last item in the slider.

Describe the solution you'd like
When one item is swiped/slided, the next item should appear exactly in place(position) of prev item.

Describe alternatives you've considered
I tried below variations:

1. setting itemsToScroll=1.2
2. applying style

.rec-item-wrapper {
 width: 100% !important;
}

3. returning always 1 from getNumOfVisibleItems()
4. setting itemPosition={consts.START}

Additional context
I think the function onNextStart or updateSliderPosition needs to be updated for this.

Please let me know if I am missing something or this can be already achieved via current settings and there is no need to make a new feature.
Here is a sandox link where I am trying.

For Typescript

Can I use this package in typescript ? I am refactoring my project to typescript and I should convert it to typescript

update selected pagination only after transition end

Cannot read property 'props' of undefined

When I try to use this lib I get an error

What should I do?

renderPagination seems to run ~8 times on intial render

I'm wondering if this is normal, I created a pretty bare-bones example in codesandbox were I am rendering a Material UI Pagination component from the renderPagination function.

I also tried memoizing the component however it seems like the pagination is always rendered multiple times.

How do I get rid of / update the style "margin: 0 10px;" which is a part of SliderContainer.js

First of all, thanks for making this package.
I think I am gonna use it in my production if all features required in my org are fulfilled.

Also, great that you have used styled-components.

Maybe make it(margin) as a prop or remove it as we can introduce our style in its parent.

onResize is not always called with the new breakpoint

Error: Can't resolve 'styled-components'

Describe the bug
After installing and importing this package, the console shows me a missing package.

To Reproduce
Steps to reproduce the behavior:

1. Install the package with yarn.
2. Import it into a component
3. Run the project
4. Don't see anything in the site
5. Go to the console to get the error

Expected behavior
We must see the whole event with the carousel.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Manjaro Linux
• Browser Chromium
• Version 81
  Additional context
  Add any other context about the problem here.

Please add types for typescript

Today is very important to have typescript compatibility, so please can you add it?
Thanks.

The import error says:

Could not find a declaration file for module 'react-elastic-carousel'. '/node_modules/react-elastic-carousel/dist/index.js' implicitly has an 'any' type.

Try npm install @types/react-elastic-carousel if it exists or add a new declaration (.d.ts) file containing declare module 'react-elastic-carousel';ts(7016)

Lazy loading?

Is your feature request related to a problem? Please describe.
I'm using the carousel for showcasing some posts, and would like to lazy load to not make the page be bombarding requests.

Describe the solution you'd like
I'm wondering if that is possible with the current props in the library, if it should be part of the library or if there is a specific way non-library way that you'd recommend?

Describe alternatives you've considered
External libraries maybe that will lazy-load when in view, but I feel like this might be a thing that could be part of the library.

Feature request: Disable or hide arrows on first/last pages

Currently if you are on the first page, the PREV arrow still shows normal. If you click it, it does not change the content.
It would be nice if we had an option to disable the buttons so they are shown as disabled (maybe add separate class styling for these, but that's different), and/or hide the button altogether (possibly with a placeholder).

I was able to implement this manually by editing the renderArrow() function and using the ref of the Carousel and checking ref.current.state.activePage, and comparing to the total number of pages (ref.current.state.getNumOfPages() and offset by 1), but this is far from ideal. Then, I also have to render my own arrow and cannot use the default.

Create option, or permanently disable the blue outline when element is focused

I can't disable the blue outline when a carousel element is focused. would be nice to have an option to disable this highlight.

Feature Request: Implement onChange function

Is your feature request related to a problem? Please describe.
It is frustrating when I want to know the current page so I can implement my own logic (e.g. set a state variable)

Describe the solution you'd like
Implement an onChange parameter that accepts a callback function, so everytime the page changes (prev/next arrow click, or goTo() is called), then the callback is fired.

Describe alternatives you've considered
Manually accessing the ref to get the state: ref.current.state.xx, but can only 'trigger' this for renderArrow() or other functions that are called multiple times - cannot see WHEN it was changed naturally.

Additional context
N/A

Clicking the arrow buttons will submit a form.

Describe the bug
The arrow buttons are submitting a form as they have no type specified.

** Fix **
Just add type={"button"} in src/react-elastic-carousel/components/Arrow.js

This is an easy fix. Just need to add one line of code in Arrow.

Can't resolve 'styled-components' in 'node_modules\react-elastic-carousel\dist'

I imported and run then i got error. Can you give me solution

Hide arrow buttons when not enough content

It would be great if the arrow buttons were not rendered if there wasn't enough content. An example is that I use this to show news articles in a card, if there is only one article for example, it looks a little silly with disabled arrows either side. So I guess the time the arrows would render is when there is enough items to actually enable the "next" arrow button.

focusOnSelect should not transition last items to first position

add support for custom pagination

Can't resolve 'styled-components' in ../node_modules/react-elastic-carousel/dist

Describe the bug
Asking for styled-components on a project without it.

./node_modules/react-elastic-carousel/dist/index.es.js
Module not found: Can't resolve 'styled-components' in /node_modules/react-elastic-carousel/dist'

To Reproduce
Steps to reproduce the behavior:

1. Install fresh in a project and follow the instructions in the docs to run.

Expected behavior
Works normally

Additional context
The project was created using typescript and material-ui

How do I style the dots at the bottom?

I am trying to use renderPagination, but I will have to pass a whole new component.
I only want to change the styles of the dots at the bottom. Any way to do that or can you introduce new props?

How can I style the indicators when active and not active state.

I was wondering how I can style the indicators on the carousel. I see I can style the indicator itself by using the classname .rec.rec-dot but I was wondering how can i change the style of the indicator when its active? Thanks

support vertical layout

Not able to scroll to below or upward

I found some issue with the Carousel over mobile screen. The problem starts when we set the carousel height to 100vh + full width, once you reach to the carousel section, thats it you cant scroll up or below to previous or next sections. But scrolling left and right to view the content inside the carousel is working fine.

Over desktop browsers no issues as we can scroll up and down using mouse wheel but the issue only occur over phone touch screen. I am using iPhone 11 safari for testing.

Thank you

[Feature Request] add prop for hideArrowsOnEnd

Is your feature request related to a problem? Please describe.
Currently we have disableArrowsOnEnd that still renders arrows, but they are disabled. It would be nice to have an option to hide them completely.

Describe the solution you'd like
Added boolean prop hideArrowsOnEnd (or change the disableArrowsOnEnd to a new prop with an enum for "show", "disable", "hide" with default "disable"), which causes the arrows to be hidden / not rendered at all

Describe alternatives you've considered
Manually using renderArrows function to check if on an end page or not, then rendering a placeholder empty div

Additional context
A placeholder would likely be needed to keep the spacing balanced for the cards.

Related to issue #36 and PR #42

Feature request: Disable or hide pagination

Our design requires not showing arrows and paginators.
You already provide a solution to hide arrows, but no any option to hide also padding, and it would be great if you can provide an option for it.

Great work, Thanks!

Infinite looping of children

Hi @sag1v, thank you for creating this library!

Describe the solution you'd like
I'd love to be able to loop through to the first item, if I click on "next" from the last item, so creating an infinite loop of the children.

Describe alternatives you've considered
Maybe using an event handler to see if this is the last child, in which case onNext can call goTo with the first slide index?

Outline around items

There is an outline around each item within the carousel when clicking on the item, since the latest update.

What to do while loading

It takes a 0.3 sn while loading, can we handle this?

Is there any callback which we can use?

Thank you for awesome project!

Problem with currentPage when replacing data sets (items)

Hi.

I have a view that uses the Carousel.
View allows me to provide the Carousel with different sets of data.
If I move the active page to let's say page number 3 on one set of data, (18 items showing 4 on screen)
when I switch the data to a different set I would like to be able to reset the activePage to be 0.

This also causes a bug when the data set that we move to has only 1 page but the activePage is set to something like 3.
We will not see all the items that we should see.

Created a sandbox to better explain this:

Sandbox link:
https://codesandbox.io/s/react-elastic-carousel-forked-v7ziz?file=/src/index.js

To reproduce:

1. Click on the Data Set 3 button
2. Using the pagination move to the third page
3. Click on the Data Set 2 button
4. We have a new set of data/items but the currectPage piece of state is still on whatever was previously selected.
   Feature request would be to be able to manipulate currrentPage so can be reset with new data
5. Now to the bug: while still being on a third page of pagination, select Data Set 1.
6. You can only see 1 item being shown (for me it's the item number 3). This happens when the currentPage is higher than the number of pages for the current list of items.

Expected behaviour:
Carousel resets currentPage to the first page in this case

Add compatability for styled-components 4

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

styled-components 4 has changed they way refs are retrieved.

The "innerRef" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use "ref" instead like a typical component.

Since react-elastic-carousel uses styled-components 3, it's not currently possible to use react-elastic-carousel within a project that depends on styled-components 4.

Describe the solution you'd like

Either update styled-components or remove it as a dependency.

passing height prop yields Over 200 classes were generated for component styled.div

see #47 (comment) for more details.

onNextStart not called when swiped

Current Item

Why doesn't the current item have a custom class. if we can add it when navigating, how can we do that?

tabindex focus is wrong when using breakpoints

When using breakpoints the tabindex focusing is ignoring visible items.

This is due to the fact the we are only checking the itemsToShow prop that we received directly and not cheking the prop inside a selected breakpoint (if given).

Fix for styled-components v5.0.0

Describe the bug
Breaks for newer version of styled-components

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/react-elastic-carousel-fusb6
2. Update styled-components to > 4.4.1, eg: 5.0.0

Expected behavior
Should work as it is.

Additional context
Even if we update react and react-dom to latest versions, it gives something like this.

Using both renderPagination and breakPoints on <Carousel /> breaks the pages property in renderPagination

Describe the bug
When combining the renderPagination and breakPoints props on <Carousel /> the pages in ({ pages, activePage, onClick }) => does not take the current breakpoints itemsToShow into consideration.

To Reproduce
Given a <Carousel /> with 9 items, at a breakpoint showing 3 items per page will have pages be [1, 2, 3, 4, 5, 6, 7, 8, 9] rather than the expected [1, 2, 3], when using the breakPoints props rather than the itemsToShow prop directly on <Carousel />.

Expected behavior
The expected content of pages is [1, 2, 3]

Screenshots
No screenshots.

Desktop (please complete the following information):

• OS: macOs
• Browser: Chrome
• Version: 84.0.4147.125 (Official Build) (64-bit)

how to make next slide items partially visible

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Infinite

can you please add a infinite slider option to the Library?

Upgrade and fix docz - some examples are broken

After re-publish the docs (due to #25), some examples are broken - like slideNExt and goTo. I think its because these examples use a ref and something on docz is broken. Need to consider bumping docz to a newer version which might changed the API.

Height Bug

This is a bit of a strange one and I might be going about it the wrong way here so advice is appreciated. I've got different height items within the carousel, now what I'm trying to do is make them all the same height but this seems to be really difficult! Here's the CSS I have so far:

  & .rec-slider {
    display: flex;
    /*height: 100%;*/
    min-height: auto;
  }

  & .rec-slider > [tabindex] {
    height: 100%;
    outline: none;
  }

  & .rec-slider [class*="rec-swipable-"],
  & .rec-item-wrapper {
    height: 100%;
  }

Now if I use Chrome dev tools and set the height to 100% in .rec-slider div then it works great and is exactly what I'm looking for. However, if I uncomment the line in the CSS above in .rec-slider (same thing as in Chrome dev tools) then nothing is visible and the actual height is 0px!? This appears to be something that happens within the Carousel component, any ideas?

Please help, thank you!

Adding a styling section to the docs

It seems that people not aware that react-elastic-carousel exposes a css classes as part of its API (classes prefixed with rec). This should be well documented.

Cannot use goTo to reach last item after appending new items

Hi, sag1v. Thanks for the library!

I am trying to dynamically append items to the carousel.
Each time I append a new item, I would like to use goTo to display it (the last item).
However, currently this only goes to the second last item.

You can find a minimal example here:
https://codesandbox.io/s/react-elastic-carousel-l9y65?file=/src/index.js

Every time I press "Add Item", a new item is appended.
But the following code does not show the last item:
this.carousel.goTo(this.state.items.length-1);
One has to manually slide to the next item to find it hidden there.

Am I doing something wrong here? (I am new to React)
Thank you!

Generated bundle includes dependencies

Describe the bug
The generated bundle includes dependencies like classNames & the RO polyfill. As a result, the consumer's bundle can include those dependencies multiple times if they're used in other bundles.

To Reproduce
Steps to reproduce the behavior:

1. Install react-elastic-carousel.
2. Look at the dist/index.js file.
3. See the code for classNames & others.

Expected behavior
The bundle should only include the lib code so consumers can effectively dedupe tertiary dependencies.

Scrolling does not work correctly after tab through children

Describe the bug
If you use tabs to navigate to the children, then the pages are unaware of the change and scroll is incorrect.

To Reproduce
Steps to reproduce the behavior:

1. Set the children to a list of elements larger than one page (e.g. size 5 page with 20 elements)
2. run app and tab to the elements (e.g. keep tabbing to the 6th element or more) WITHOUT clicking the nav buttons - this will cause the carousel to "scroll" one item at a time
3. click Prev button
   Then, the prev does not scroll, because it thinks it is still on the first page. This behaves the same for a final page or other pages.

Expected behavior
The scroll buttons continue to scroll until reaching the true end.
Ideally the ref state would be updated to reflect the current page/offset when tabbing, or that tabs would not cause scrolling, but instead would tab to the next button.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 60.9.0esr

Smartphone (please complete the following information):
N/A

Additional context
I know that the goTo(), next/prev arrows, and pagination buttons all trigger a state change for the active page, so the scrolls are likely tied to that.. and the carousel is actually rendering the entire list, but hiding all elements besides the current "page", which allows scrolling to work easier (css: overflow: hidden). This causes a few weird quirks when you 'scroll' without using the library functions to do it (e.g. tabs)

I am making a spfx web part with carousel, for that, I am using react-elastic-carousal, but while using it I am getting an error

Describe the bug

I am making a spfx web part with carousel, for that, I am using react-elastic-carousal, I installed it using npm.
But when I try to use it in my spfx tsx file it is throwing error

To Reproduce

Carousel' cannot be used as a JSX component. Its instance type 'ReactElasticCarousel' is not a valid JSX element.
Type 'ReactElasticCarousel' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

Expected behavior
A clear and concise description of what you expected to happen.
A component should load instead.

Screenshots

Dynamic height of items doesn't adjust actual carousel height

I have items within the carousel that change in size based on media queries, this works great for normal use. However, if I resize the desktop browser for example, the height of the original items still remains for the carousel component, even though it's items are much smaller. This leaves a huge blank space of the original height of the items. This seems to only have an effect when the browser is shrunk in size, when stretching it back out this doesn't happen.

Breakpoints are being ignored

Describe the bug
The breakpoints are ignored, always showing 1 item.

To Reproduce

export const NewsCarousel: FC<{}> = () => {
  const news = [
    {
      title: 'test1',
    },
    {
      title: 'test2',
    },
    {
      title: 'test3',
    },
    {
      title: 'test4',
    },
  ];

  const breakpoints = [
    { width: 1, itemsToShow: 1, itemsToScroll: 1 },
    { width: 550, itemsToShow: 2, itemsToScroll: 1 },
    { width: 850, itemsToShow: 3, itemsToScroll: 1 },
    { width: 1150, itemsToShow: 4, itemsToScroll: 1 },
    { width: 1450, itemsToShow: 4, itemsToScroll: 1 },
    { width: 1750, itemsToShow: 4, itemsToScroll: 1 },
  ];

  return (
    <div>
      <Carousel
        //itemsToShow={4}
        breakpoints={breakpoints}
        showArrows={false}
        itemPadding={[0, 8]}
        enableMouseSwipe={false}
      >
        {news.map(aNew => (
          <div key={aNew.title}>
            <div>{aNew.title}</div>
          </div>
        ))}
      </Carousel>
    </div>
  );
};

Expected behavior
I expected it to show 4 items and decrease the quantity when the screen is smaller

Screenshots

Desktop (please complete the following information):

• Ubuntu
  -Chrome

Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition.

Warning:

Functions as object-form attrs({}) keys are now deprecated and will be removed 
in a future version of styled-components. Switch to the new attrs(props => ({})) 
syntax instead for easier and more powerful composition. 
The attrs key in question is "style" on component "styled.div". 
 Error
    at ...........

Resolution required in 2 files:

1. In Poster.js

import styled from "styled-components";
--
2 |  
3 | const Poster = styled.div.attrs({
4 | style: ({ src }) => ({ backgroundImage: `url(${src})` })

2. In ItemWrapper.js

import styled from "styled-components";
--
2 |  
3 | export default styled.div.attrs({
4 | style: ({ padding, width, height }) => ({ padding, width, height })

tests are failing with - TypeError: environment.teardown is not a function

Describe the bug
tests are failing and throwing:

TypeError: environment.teardown is not a function

To Reproduce
run npm run test

Screenshots

Additional context
Seems relevant to this