g787543 / infinite-react-carousel Goto Github PK

it would be good if i can disable the draggable behavior. Within the current attributes is the "swipe" but this does not disable being able to move the slide with the pointer.

If someone knows how i can disable from client side please tell me.

This library is one of the best that i found.

Describe the bug

I imported the package in page and this error occurred :

So I clicked on the proposed link and that's the next solution :

Expected behavior
Import the package without error about Global Css

Desktop:

• OS: iOS , 10.15.5
• chrome Version 83

Is your feature request related to a problem? Please describe.
I want to be able to customize the arrows style

Describe the solution you'd like
arrows style cusmization is a an important feature if it is possible to add this feature as props to be given to the slider

Describe the bug
Does not use passive listeners to improve scrolling performance. This also results in a reduced score in lighthouse for example.

To Reproduce
Steps to reproduce the behavior:

1. Run a lighthouse audit
2. See error listed under "best practices"

Expected behavior
Use of passive listeners for the touch and wheel event listeners.

Desktop (please complete the following information):

• OS: MacOS 10.15.3
• Browser: Chrome
• Version: 81

Additional context
This requires a browser check to see if passive listeners are supported.

Get below error when try to use this control in one of my react project using SPFx framework:

Error: can not create array
at new CircularArray (array.js:115)
at Slider. (slider.js:208)
at Yi (sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1)
at $i (sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1)
at Na (sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1)
at Ma (sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1)
at sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1
at Object.Ay1f.t.unstable_runWithPriority (sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1)
at wo (sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1)
at xo (sp-webpart-workbench-assembly_en-us_78bb8d9cee2a1258615d5c8689e23963.js:1)

Any help would be highly appreciated!

slickNext(), slickPrev() and slickGoTo()

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.

How to stop looping when arrows are enabled?

I have cards of carousel and i want to stop looping. I did not find any prop or method for this.

Can someone help me here.

Thanks

You are wonderful! Can you support running translateX with css just like react-slick? Your virtual mode if combined animation from css will be extremely good for performance! Currently position updates with javascript result in constant dom updates.

Is your feature request related to a problem? Please describe.
Actually, I want a responsive carousel but did not found any props or keywords in this library.

Describe the solution you'd like
how to make it responsive?

it would be good if I can stop the autoplay on screen touch (mobile). Currently, this library will try to scroll back & forward on touch.

If someone knows how I can disable it from client-side please let me know.

It can't be dragged to slide on mobile and the props on number of item to show per frame is only showing one item in a frame After I increased it to 3.

When I run npm I infinite-react-carousel it installs the plugin and I also add this infinite-react-carousel to gatsby-config.js file but when I run gatsby develop command it shows Error: Unable to find plugin "infinite-react-carousel". Perhaps you need to install its package?

I don't find this plugin on gatsby.org website how can I use this plugin in my project, please advise.

I want to know if there is a correct why to know WICH is the 'showing image' that's actuali in center.

I want this to be able to handle the styles of the Center Image differently that the sides images, when showing 3 images in screen.

I tried the beforeChange and afterChange, that gives you the number position of images when it changes, and it was usefull. But if you change the Image by Swiping, (not clicking), this value gets null, and the condition for styles get lost until you change the image by clicking again (arrows or dots).

Is there another way to know what is the current index of the center image inside the component?

Currently, every time the slide init, all the React Component will be mounted. I write the log on componentDidMount event to see that

Your library provide a VirtualList options, but if I set it as true, then whenever I swipe, it will re-render the component again, jumping to componentDidMount, but if I set it as false, then it will not re-render

I need the feature to render the slide only whenever this slide is visible
Thanks

Describe the bug
Having autoplay and beforeChange={(e) => console.log(e)} at the same time, disables the autoplay.

Error message I am getting Global CSS cannot be imported from within node_modules.

"dependencies": {
"@next/font": "13.1.1",
"eslint-config-next": "13.1.1",
"infinite-react-carousel": "^1.2.11",
"next": "^13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1"
},

I have tried to downgrade the package I am still getting the same error message.

Please suggestion a solution or a walkaround

I'm using Next.js with Typescript but the package doesn't work because of types missed.

First of all, thanks for this lib ! you did an awesome job :)

Describe the bug
I'm using your lib just to have an infinite autoplay slider.
The timer seems to be frozen sometimes at first app render (I have to refresh to make it start).
I have the same issue when I switch on another tab, it freezes where it was just before (I usually see the end of the scroll animation and then never switch to the next slide).
I set up a srcollSpeed to 8000

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://storybook-95-stoomlink-smartdisplays-frontend.nextmoov-ops.now.sh/?path=/story/disturbscreen--default'
2. Maybe It will work at first render, maybe not.
3. Try to switch to another tab and then come back to that one

Expected behavior
It should just start and never stops while the app is running, maybe it can restart to the first slide when you switch on another browser tab.

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser: Chrome
• Version: 79.0.3945.117

NOTE: This is still a WIP, and custom styled

Hi !
I'm trying to add CSS with modules , but it's impossible because my css it's blocked by the inline styling! Please can you upload info about how to do it ?

I have issue with implement custom previous and next arrow, this is my props code

<Slider
  slidesToShow={6}
  centerMode={true}
  prevArrow={
    <button class="carousel-arrow carousel-prev button">
      <Icon path={mdiChevronLeft}
        title="Previous Company"
        size={1}
      />
    </button>}
  nextArrow={
    <button class="carousel-arrow carousel-next button">
      <Icon path={mdiChevronRight}
        title="Next Company"
        size={1}
      />
    </button>}
/>
{data}
</Slider>

it show like below

Does not support IE 11, get the error message "Object doesn't support property or method 'forEach'". Adding react-app-polyfill and other polyfill offerings to project do not help... the issues is inside the carousel libraries where the polyfill libraries are not being imported.

Looks like this is specific to SPfx (SharePoint Framework) webparts. The carousel works when standing on it's own, but put it into a SharePoint Framework webpart and the forEach calls all blow up internally to the infinite-react-carousel node_module.

The slider doesn't work in safari: ReferenceError: Can't find variable: ResizeObserver.
Using version 1.2.0

ResizeObserver class is not (native) implemented in safari so probably need to include the polyfill

Describe the bug
I have a multi-page React app where on the main page I am using a simple Slider and I am using
react-router-dom to traverse between the pages
so the problem is that when I go to any other page after being at the page that has the slider
and resizing the screen I get this error :
slider.js:490 :
Uncaught TypeError: Cannot read property 'querySelector' of null
at Slider.connectObserver (slider.js:490)
at Slider.handleResize

To Reproduce
open a page that has a slider
unmount it ( by going to another page for example )
go back to the original page and resize the screen

NOTE that I am using react-router-dom , if you were to not use it no problem will happen but
if I dont use it then its not a SPA

Expected behavior
the event listener will be removed or at least not fired if the slider has been unmounted

Screenshots

and this is the line generating the error:

Thank you in advance

I get this error when I try out the demo example.

Element is not defined
ReferenceError: Element is not defined
    at Object.<anonymous> (d:\Scripts\BotBind\node_modules\infinite-react-carousel\lib\carousel\types.js:142:80)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (d:\Scripts\BotBind\node_modules\infinite-react-carousel\lib\carousel\slider.js:24:14)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

above carousel when I tried in IE 11 page is totally blank. :(

"Object doesn't support property or method 'forEach'"
"TypeError: Object doesn't support property or method 'forEach'
at a (https://g787543.github.io/infinite-react-carousel/main.js:46:86254)
main.js (30,45709)

Looking for a new carousel :((

Element is not defined
ReferenceError: Element is not defined
at Object. (/media/psf/wetravel-in-docker/ssr-next/node_modules/infinite-react-carousel/lib/carousel/types.js:142:80)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (/media/psf/wetravel-in-docker/ssr-next/node_modules/infinite-react-carousel/lib/carousel/slider.js:24:14)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)

Didn't work the previous solution suggestion.
#5

Hey, thanks for this project!

I'm working on a project that supports RTL.
When I swipe in RTL, The expected behavior of the dots goes wrong.
I tried to use the rtl prop setting to mirror the swiping effect like LTR user, but it's doesn't work

Good behavior (LTR): swipe from right to left => switch to the second dot and then to the third dot.

Bad behavior: (RTL): swipe from left to right => switch to the third dot instead of the second dot.

Is your feature request related to a problem? Please describe.
Tried using vite and the standard create-react-app and neither seems to work. it says "unable to resolve dependency tree"

Describe the solution you'd like
Would be nice to have it be synced to the latest version.

Describe alternatives you've considered
Downgrading from v18 to v16 works.

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