vadymshymko/react-simply-carousel

A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable

Hi there 👋

🔭 I’m currently working on something cool
🌱 I’m currently learning something new
👯 I’m looking to collaborate on something new and cool
💬 Ask me about front-end tech

react-simply-carousel's Issues

Can't change the max width through the innerProp

Max width & other existing values are not changing/overwriting through the innerProp

How to know when end has been reached

Is your feature request related to a problem? Please describe.
I want to know when the carousel has reached the end so i can do a fetch request our api and load more into the array.

Describe the solution you'd like
When the last item in the array if visible on the carousel, we want to execute a function.

Describe alternatives you've considered
No alternatives that i can think of now.

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

slide is sliding to backward first time and second time on wards sliding forward.

Hi,
I am new to this slider, I was using this in one project.
case is :- I have an array of object like below :-
slideItems: [
{
customer: {"int": "int", "dom": "dom"},
imgUrl: "imgurl1",
content: "content1"
},
{
customer: {"int": "int", "dom": "dom"},
imgUrl: "imgurl2",
content: "content2"
},
{
customer: {"int": "", "dom": "dom"},
imgUrl: "imgurl3",
content: "content3"
},
{
customer: {"int": "", "dom": "dom"},
imgUrl: "imgurl4",
content: "content4"
}
]

So here, total slides are 4, and on the basis of customer type I am filtering, last two slides only, by creating new array, and that filtered array with two slide object I am supplying to slider, it's displaying correctly, but when I am clicking on dot's navigation, first time slide is moving backward, then second time, it's working fine, moving forward only.

Here, if I didn't filter that array, and directly supply that array to slider, slides are moving forward only.

I didn't get that behavior, what is wrong with filtered array or what is the difference between filtered array and old array.
slide index are also correct, if in filtered array their are two slides, so index will be (0, 1) and if three slides then it will be, (0,1,2).
I am setting active index also correct, because it's working fine with old array, but not with filtered one. And both array don't have any difference, just slide object are less in filtered array in compare of old array.

I think their is an bug in this slider, with filtered array, please have a look.
And also their is also no direction property is their for slider to move slides accordingly, it's only for "auto play".
If someone not using "auto play" and want to move slides backward or forward explicitly, their should be a property to force the different behavior of slide's movement (backward and forward).

Stopped working after text being selected

Describe the bug
I tried both examples to my project. There is a problem after some text being selected inside the slide the carousel stopped working, even the dots didn't do anything when I clicked it. I had to refresh the page in order to make it back to work. But, when I accidentally selected some text, it will stop working again.

I thought the issue was on my browser but even if I changed it to Edge and Chrome this problem still remains.

To Reproduce
Steps to reproduce the behavior:

1. Open the demo on Codepen or run it on local
2. Select the text on the middle
3. Try to click the dots or swipe the slide

Expected behavior
Still works when being selected/unselected

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Windows 10]
• Browser [e.g. Chrome, Edge]
• Version [e.g. latest version]

max-width : 1809px limits the width of the carousel

Description
I found out that a max-width property is set on the wrapper and this prevents me from allowing the carousel span from end to end of the screen.

To Reproduce

1. Put the Carousel inside a container or render it like any other component
2. You will see that there is some extra space at the end of the carousel. When you inspect the carousel with chrome devtools, you would notice that a max-width : 1809px has been set. I have tried to set the max-width on the carousel component but there is no props for that I am not able to use the style props. Please see the image below. The unwanted space is circled in orange and the carousel code is in the scope of the purple marker.
   

Expected behavior
I was expecting that the carousel would span the entire width of its parent container like in the screenshot below. Here I have removed the max-width property entirely and it behaves properly.

Desktop:

• OS: [e.g. Windows]
• Browser [e.g. chrome]

Thanks a lot for the great work.

Responsive Props make no difference

Describe the bug
Trying the slider look on tablet the same like mobile.

To Reproduce
Steps to reproduce the behavior:

1. Go to codesandbox example
2. Add the following props

          responsiveProps={[
            {
              itemsToShow: 2,
              itemsToScroll: 1,
              minWidth: 768,
            },
          ]}

Expected behavior
I see 3 items same as mobile.

Screenshots
Mobile:

Tablet:

Desktop:

• OS: MacOS
• Browser chrome
• Version 120

Infinite loop prop

Hello, is it possible to add infinite loop as optional? This slider is small and works like a charm but I think this could be optional?

Back Button Navigation Issues

Describe the bug
Issue: The carousel back button is enabled but clicking it does nothing.

Long Description: There seems to be a bug in the carousel component that is preventing the carousel from navigating to the first set of slides when the following are true:

• activeSlideIndex is initially set to a value greater than 0
• infinite is false
• disableNavIfEdgeVisible is true

In our application, the carousel is used as a sort of navigation tool, where a query parameter could be used to set the initially active slide of the carousel. When the page loads, the carousel renders as expected with the query parameter slide selected. The user is able to navigate forward and backwards (mostly) as expected.

The issue comes when the user tries to navigate to the first slide, or first set of slides containing the first slide. In this instance, there are still a set of slides to navigate into view and the back button is correctly enabled, but if the number of slides to scroll is greater than the number of slides remaining, the carousel does not seem to call the onRequestChange function.

To Reproduce
This is the official sandbox linked from this repo. I forked it and changed a few configurations to match how my team is using the carousel.
https://codesandbox.io/s/react-simply-carousel-demo-back-nav-issue-xkoysw?file=/src/index.js

Expected behavior
Clicking the back button will navigate the user to the first set of slides.

Desktop (please complete the following information):

• OS: Mac Monterey
• Browser: Latest Chrome

Smartphone (please complete the following information):

• Yes, also affecting Android and iPhone

Screenshots
In this gif, itemsToScroll={3}. When I select the a matchday, the back button no longer works. At the end when you see the mouse over the active back button, I am attempting to click it, and the callback function does not fire.

next.js: ReferenceError: document is not defined

Describe the bug
I'm using next.js 9.4 and was trying to use your library, as you are describing it with "SSR Support". Unfortunately the compilation fails with: ReferenceError: document is not defined

Custom Controls not working correctly

Describe the bug
Custom controls not working correctly. When I load the app and use the controls in infinite mode, after pressing the next button when sitting on the last item, it will go back to the first instead of looping through. But if I use the slide for once (for example slide right) I can loop through using next, but if I use back it will go right as long as it reaches the item. So going back is completely broken. Same with sliding left once and using the next button afterwards. It will then go back through all items! The controls you provide are working as intended!

To Reproduce
Steps to reproduce the behavior:

1. Go To the example sandbox
2. include the following code

<div>
        <button
          onClick={() => setActiveSlide(activeSlide > 0 ? activeSlide - 1 : 9)}
        >
          last
        </button>

        <button
          onClick={() => setActiveSlide(activeSlide < 9 ? activeSlide + 1 : 0)}
        >
          next
        </button>
      </div>

Expected behavior
Working as expected in both ways! Looping through correctly.

onRequestChange does not work as expected

Describe the bug
Navigation buttons do not call the onRequestChange prop if the first or last slide is active (disableNavIfEdgeVisible and disableNavIfEdgeActive props are set to false)

To Reproduce
Steps to reproduce the behavior:

1. Create Carousel with infinite prop = false
2. Set disableNavIfEdgeVisible and disableNavIfEdgeActive = false
3. Click on nav btn when first or last slide is active
4. onRequestChange prop not called

Expected behavior
onRequestChange should be called

Recent changes to `max-width` property mean that the first item won't display without JS

Describe the bug
Recently I updated to the latest version and discovered the first item in the Carousel doesn't render without JS. I think it's because of this max-width: 0 which only gets changed once JS runs.

This is important to me because I'm focusing on performance, so I want to show the user something without having to wait for JS to load, parse and run.

To Reproduce

1. Create a Carousel
2. Disable JavaScript in the page and refresh

Expected behavior
I expect to see the first item in the carousel, rendered.

Responsiveness behavior is not working

Describe the bug
When trying to check it in the mobile, responsiveness is missing, even after making use of responsiveProps

To Reproduce
<Carousel
updateOnItemClick
containerProps={{
style: {
width: '100%',
justifyContent: 'space-between',
},
}}
responsiveProps={[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]}
activeSlideIndex={activeSlide}
onRequestChange={setActiveSlide}
disableNavIfEdgeVisible={true}
disableNavIfEdgeActive={true}
infinite={false}
forwardBtnProps={{
children: '>',
className: classes.forwardButton,
}}
backwardBtnProps={{
children: '<',
className: classes.backwardButton,
}}
itemsToShow={2}
speed={400}
>

Item

Expected behavior
Should work fine for mobile devices

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Cannot read property 'offsetWidth' of undefined

This issue come multiple times and it breaks the complete page

When `inifinite=true` the Carousel Items are duplicated 3 times.

Describe the bug
When infinite=true, the carousel items are duplicated 3 times.

To Reproduce

1. Create a Carousel (you can use the code in the README.md
2. Open DevTools and look at the HTML

Sandbox example: https://codesandbox.io/s/agitated-carlos-z6qzvs

Expected behavior
I'd expect that items don't need to be duplicated, and the infinite feature is achieved by shuffling items around.

Help needed! Carousel rendering slides 3x the length of array

Describe the bug
I am getting slides 3 times the length of array.
Eg: If my array has 2 items, it renders 6 divs. If array has 7 items, then 21 divs.

Attaching a codesandbox link for clarity: https://codesandbox.io/s/react-simply-carousel-demo-forked-zspf45?file=/src/index.js

Expected behavior
Number of slides should be equal to length of array

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

Desktop (please complete the following information):

Windows 10, Chrome

Please help!!

Stop scroll when you pass infinite as false in responsive mode

When you setup the infinite as false, your responsive scroll stop before you see your last item

To Reproduce
infinite={false}

Expected behavior
It would be show all the items, right?

When items to scroll is greater than the actual children, swipe by mouse or touch are malfunctioning

Description of the Bug

When we set itemsToScroll and the items in the list are less than that number, then when we drag the list to right or left, the list is moving way more and if we move them to extremes they are disappearing.

To Reproduce

I am providing a link of codesandbox which contains the same configuration I did in my project, you can run the sandbox to reproduce the issue
Click Here to get to the sandbox

Expected behavior

What I think would be the ideal scenario is that if all the list items are visible then the drag functionality should be disabled and it should be the same when the items to scroll is greater than the actual list of items.

Screenshot of the issue

Stop propagating touch events on mobile when scrolling carousel with a finger

Is your feature request related to a problem? Please describe.
If carousel is inside a vertically scrolling container, when trying to slide carousel left-right on mobile it will also scroll the container up and down which is not very nice UX

Describe the solution you'd like
When carousel captures touch events, prevent propagating them

Describe alternatives you've considered
Increase horizontal sensitivity (with a prop) so that left-right touch scroll happen faster, but that would still not fix the core issue. But that could also be a separate feature improvement: prop that configures what percentage of the width of carousel needs to be scrolled for carousel to animate to the new slide

TypeError: Cannot read properties of undefined (reading 'offsetWidth')

Describe the bug
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'offsetWidth')

Call Stack
eval
node_modules\react-simply-carousel\dist\index.esm.js (1:5567)
C
node_modules\react-simply-carousel\dist\index.esm.js (1:7350)
renderWithHooks
node_modules\react-dom\cjs\react-dom.development.js (16141:0)
updateFunctionComponent
node_modules\react-dom\cjs\react-dom.development.js (20313:0)
updateSimpleMemoComponent
node_modules\react-dom\cjs\react-dom.development.js (20151:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (22433:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (4157:0)
HTMLUnknownElement.nrWrapper
/ (1:30750)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (4206:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4270:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (27243:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26392:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (26303:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (26271:0)
recoverFromConcurrentError
node_modules\react-dom\cjs\react-dom.development.js (25689:0)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25589:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)

To Reproduce
react-simply-carousel :8.3.3
Environment NextJS

Expected behavior

Screenshots

does not work in next js

return error TypeError: Cannot read properties of undefined (reading 'offsetWidth') next js

Click not working in carousel items after swipe

Describe the bug
When using the swipe behavior, if you have clickable items inside the carousel eventually the click stops working.

To Reproduce

1. Swipe carousel item
2. Try to click it
3. Repeat until the click will eventually stop working

CodeSandbox - this is basically the same demo code available in this repo, just adding a click event to the carousel item

Expected behavior
Always be able to click on the items after swipe

Screenshots
https://github.com/vadymshymko/react-simply-carousel/assets/8807085/c74d4513-f003-42b4-8611-99604634e0d0

I recorded a video showing what happens here. In every swipe I was doing a click, by the end of the video you'll notice the clicks stop working completely.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 120

Is there anything I'm doing wrong? Am I missing some setting?

The carousel breaks when there is no children

Describe the bug
The carousel break when there are no children