trendyol / react-carousel

Lightweight carousel component for react

React Carousel

Please visit to docs website for more details.

Installation

npm i react react-dom @trendyol-js/react-carousel --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from '@trendyol-js/react-carousel';
import { Item } from './yourItem';

ReactDOM.render(
	<Carousel>
		<Item />
		<Item />
		<Item />
		<Item />
	</Carousel>,
	document.getElementById('root'),
);

License

Distributed under the MIT License. See LICENSE for more information.

react-carousel's Issues

Mapping an array of object doesn't work in Carousel

Describe the bug

Hello !

I'm retrieving data from an array object that looks like this :

export const ProjectCarouselData = [
    {
        id: 1,
        title: "UIC - Extranet",
        demo: "https://extranet.uic.org/en/authentication?destination=",
        image: "./images/logo-uic.png",
    },
    {
        id: 2,
        title: "Isagri emploi",
        demo: "https://emploi.isagri.fr/",
        image: "./images/isagri-logo.png",
    },
    {
        id: 3,
        title: "LaShootingBox",
        demo: "https://www.lashootingbox.com/fr",
        image: "./images/logo-shooting-box.png",
    },
]

Then, I'm trying to display the image from it using a simple map :

import React from "react";
import { Carousel } from "@trendyol-js/react-carousel";
import { ProjectCarouselData } from "components/data/projects-carousel";

function ProjectCarousel() {
  const data = ProjectCarouselData;

  return (
    <div>
      <Carousel show={3.5} slide={3} swiping={true}>
        <div>
          {data.map((project) => {
            return <img src={project.image} alt={project.title} key={project.id}/>;
          })}
        </div>
      </Carousel>
    </div>
  );
}

export default ProjectCarousel;

Yet it doesn't work, saying

Is there any work around possible ?

Reproduction

Reproduction: for me what I've given is enough to reproduce!

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 6.15 GB / 15.93 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.69)     
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @trendyol-js/react-carousel: ^2.0.1 => 2.0.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Why no Images to preview the tool?

Clear and concise description of the problem

Why no Images to preview the tool?

Suggested solution

Why no Images to preview the tool?

Alternative

Why no Images to preview the tool?

Additional context

Why no Images to preview the tool?

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Arrow

How i can arrow bellow slides? Can I adjust the location of the arrows under the slide containers myself?

Scroll to Element

Clear and concise description of the problem

I believe react-carousel should have the ability to scroll to a specific element in a carousel.

Suggested solution

For example, if there is five elements and I want to have element 4 visible, there should be an "initialIndex" property that would display that xth element on carousel initialization.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

When click to an item, scroll until the element is fully visible in the viewport.

Clear and concise description of the problem

When Any item clicked if item isn't fully inside current view slide item to current position than trigger click action

Suggested solution

• Create a props for this feature
• Create a placeholder view and show that placeholder if item isn't current item.
• When you click that placeholder view.
• Trigger Slide action to left or right
• Than trigger children's click action

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Auto swipe

Clear and concise description of the problem

The Carousel component receives a parameter called auto so that the elements have an automatic slide

Suggested solution

Hmm i not idea

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

setInterval

Hello, I looked in the Documentation about the interval, for the Carousel to move, but unfortunately don't have it.
It's posible I create it and increment on my code?

Lack of customizability on ScrollingCarousel

Clear and concise description of the problem

The ScrollingCarousel component lacks a bunch of props which Carousel has, such as "show", "slide" etc. You also cannot modify/customize the arrows and such.
Currently if I try to use it, the children just squish together not even filling up the entire document width, the right arrow (it isn't even on the right, it's at the top of the children components) appears and dissapears as it feels and the "left" one is only there when it moves (scrolls).

Suggested solution

Add customizability props to ScrollingCarousel.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Swiping not working

Actual behaviour:
Use Carousel element with swiping={true} property.
Try to swipe - swiping not working.

Expected behaviour:
Swiping is working.

Live example on codesandbox

Spacing between children

Clear and concise description of the problem

I'm having trouble figuring out the proper way to space children. Right now all of the children elements are right against each other so trying to figure out best way to do so...

Suggested solution

Ideally I think it would be a property to pass in.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

window is not defined when used the responsive props in the nextjs application

Describe the bug

I've tried to use the Carousel component in the NextJS application. Everything was fine before I used the responsive props with the Carousel component. When I've passed responsive props then throwing the error. such - window is not defined

Reproduction

There are two image links provided to see the error.
https://ibb.co/G0br5h8
https://ibb.co/hsYv7DZ

System Info

Chrome Version 100.0.4896.75 (Official Build) (64-bit)

Used Package Manager

yarn

Logs

ReferenceError: window is not defined

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

This package is not reponsive

I installed this package in my gatsby project, but when I wanted to make it responsive on mobile, I get errors, what, do I do about it

No Arrow for swiping

Clear and concise description of the problem

Work very fine but there is no arrow on your swipe button.

Suggested solution

Add an image prop in the arrow container.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Button rendering problem

Thank you for this component. It's really helpful. I am facing one problem with rendering.
I followed the documentation at https://trendyol.github.io/react-carousel/docs/installation to install the library and use it in my project.

The carousel is being rendered as seen in the attached screenshot.

My code:

import { ScrollingCarousel } from '@trendyol-js/react-carousel';

    const items = [];
    for (let i = 0; i < 20; i++) {
      items.push(
        <div style={{ width: '200px', height: '150px', backgroundColor: 'lightblue' }}>
          {i}
        </div>
      );
    }
    return (
      <ScrollingCarousel>
        {items}
      </ScrollingCarousel>
    );

I checked the installed package in node_modules and found the CSS files missing in the dist folder. So, I downloaded the source code and imported the CSS files directly in my code.

import '@trendyol-js/react-carousel/src/styles/styles.module.css';
import '@trendyol-js/react-carousel/src/styles/slider/styles.module.css';

The problem persists even after that.
Any help will be greatly appreciated.
Thanks.

sliderBase position is relative

Describe the bug

Hello,

i can´t make my slidebar because the position of the sliderBase is relative. The carousel is over my slidebar.

Why is the position relative and can you remove it please? :)

With best regards

Reproduction

Just do a sidebar

System Info

React, Typescript, react-carousel

Used Package Manager

npm

Logs

/

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Support [email protected]

Hi! this is a pretty awesome component!
But it seems that the library does not support [email protected]

No documentation on how to use the navigation?

I was dealing with navigation prop for sometime, but could not make it work.
Are you going to provide this documentation anywhere, please?
Thanks

Change transform property

Hi! Thanks for your awesome component!
I'm using Carousel component and I need to reset/change transform CSS property on ItemProvider component when I select another tab. How can I do it?

react-carousel/src/components/item/index.tsx

Line 100 in 8e4d576

transform: `translateX(${props.transform - drag.drag}px)`,

Or how can I change styles for this element?

Click and hold arrow to continuously slide?

Clear and concise description of the problem

Would love this functionality!

Suggested solution

Instead of the arrow only responding to onClick, perhaps could respond to mouseDown and slide 1 at a time? And slide the designated amount only if mouseUp is triggered?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Warning: useLayoutEffect does nothing on the server

Describe the bug

Getting a warning in my project:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

Links to this:
https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

Unsure if this is a problem or not.

Reproduction

Create a react app and add a simple carousel.

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 52.91 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Edge: 112.0.1722.68
    Firefox Developer Edition: 113.0
    Safari: 16.5
  npmPackages:
    @trendyol-js/react-carousel: ^3.0.2 => 3.0.2

Used Package Manager

npm

Logs

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Buttons always are visible in the RTL layout

I'm using Scrolling Carousel to achieve something like your example.

Everything works fine, but when the carousel reaches the end, both buttons stay visible.

In addition, this works fine on the LTR layout but breaks in the RTL layout.

Why no Images to preview the tool?

Describe the bug

Why no Images to preview the tool?

Reproduction

Why no Images to preview the tool?

System Info

Why no Images to preview the tool?

Used Package Manager

npm

Logs

Why no Images to preview the tool?

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Slider items disappear if resize screen on Chrome

Describe the bug

When we go to last items in carousel, and then resize a screen all data from first single items in carousel disappears.
Problem is only when we have responsive=true in component.

Reproduction

https://codepen.io/konradbolek/pen/mdpvbGR

1. Go to next slides
2. Resize screen

System Info

System:
    OS: Linux 5.4 Linux Mint 20.3 (Una)
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 1.91 GB / 15.57 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Firefox: 96.0.3
npmPackages:
"@trendyol-js/react-carousel": "^2.0.0"

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Problem that i don't understand, just i'm going to put images

Describe the bug

The first image is the errors and the second is the code implementation

Reproduction

1. Install Library
2. Put in your Component the same that i found in the guide
3. Go to the Browser
4. Look your console in red :(

System Info

System:
    OS: macOS 12.3.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 34.16 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.10.0 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Firefox: 100.0.1
    Safari: 15.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Window is not defined

Describe the bug

I want to make my carousel responsive in my next.js app but i got thw error window is not defined when i try to pass prop responsive={true}

Reproduction

System Info

Chrome last version

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Carousel Navigation is breaking Transition.

Describe the bug

Good day,

using Navigation prop with infinite set to true breaks the transition, but works fine when infinite is set to false.

carousel.mp4

Reproduction

https://codesandbox.io/s/elated-field-5z20b2?file=/src/App.js

System Info

npmPackages:
  @trendyol-js/react-carousel: 3.0.0
  react: 18.2.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Swipe is not consistent

Describe the bug

Excellent component!

It needs to move slide too far for proper swipe to perform.

        <Carousel show={1} slide={1} transition={0.2} swiping
          className={styles.carousel} responsive={typeof window !== 'undefined'}
        >
          <Image src="https://idsb.tmgrup.com.tr/ly/uploads/images/2020/11/25/thumbs/871x871/74716.jpg" />
          <Image src="https://idsb.tmgrup.com.tr/ly/uploads/images/2020/11/25/thumbs/871x871/74717.jpg" />
          <Image src="https://idsb.tmgrup.com.tr/ly/uploads/images/2020/11/25/thumbs/871x871/74715.jpg" />
          <Image src="https://idsb.tmgrup.com.tr/ly/uploads/images/2020/11/25/thumbs/871x871/74708.jpg" />
        </Carousel>

Reproduction

System Info

"react": "17.0.2",
"@trendyol-js/react-carousel": "2.0.1",

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Unable to swipe on a dynamic carousel initialized with 1 child

Describe the bug

When a dynamic carousel is initialized with 1 element, you are not able to swipe/change the currently selected element, even after more children are added to the carousel, as if the carousel still thinks it still only has 1 child.

Edit: The bug happens when the show prop is greater than or equal to the amount of children it is initialized with.

Reproduction

Reproduction pen

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 22.60 GB / 31.92 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 98.0.4758.102
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.55)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @trendyol-js/react-carousel: ^2.0.1 => 2.0.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Carousel cannot handles dynamic children.

I've used Carousel comp. with dynamic=true parameter but it can't handle dynamic children when i want to use it on pagination.

Loading off screen images

Clear and concise description of the problem

I love this carousel - it's the closest to how I want my carousel in my app to work.

The biggest problem is that when scrolling through, the images flash briefly, as they need to load. Other libraries - while having far larger issues - don't have this one. I think this is because this library doesn't do any loading at all before display

blinking.mov

Suggested solution

Allow us to load a certain number of offscreen images, so there's no content flash.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

ScrollingCarousel does not respond to click sometimes

Describe the bug

Hello,

I spot this bug when using ScrollingCarousel component. Sometimes, when click on an item, it doesn't respond to the click event. I think it's caused by the mouseMove and mouseDown event both fired. Could you please take a look at this and fix if that's possible? Thank you so much.

Reproduction

Screen.Recording.2022-04-22.at.10.50.01.AM.mov

System Info

System:
    OS: macOS 11.5.1
    CPU: (8) arm64 Apple M1
    Memory: 100.41 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 7.24.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 98.0
    Safari: 14.1.2
  npmPackages:
    @trendyol-js/react-carousel: ^2.0.1 => 2.0.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Responsiveness

Clear and concise description of the problem

Some highlights can't be seen in tablet and mobile views. In the video below you can see the highlights in the middle are skipped every time.

Screen.Recording.2023-04-13.at.12.20.55.mov

Suggested solution

My suggested solution is adding a "breakpoints" param and per view highlight count param. Maybe it can be named "highlightsPerView".

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Invalid attribute name: ``

Describe the bug

when I implement and use the component I get that warning

Reproduction

Only this is my code

System Info

SO Ubuntu 21.10, Browser Chrome, Package Manager Yarn

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Spacing between Items

Describe the bug

I can't get the Items to be closer to each other..

Reproduction

I can't get the Items to be closer to each other..

System Info

I can't get the Items to be closer to each other..

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

rightArrow and leftArrow prop not working for ScrollingCarousel

Describe the bug

I tried using the RightArrow and Left Arrow prop for ScrollingCarousel component but it didn't work
It works fine with Carousel though.

This is the button that shows up:

Reproduction

https://codesandbox.io/s/frosty-firefly-l440tt?file=/src/App.js

System Info

System:
    OS: Windows 10
    Memory: 8gb
  Binaries:
    Node: 16.13.4
    npm: 8.1.0
  Browsers:
    Chrome: 101.0.4951.67
  npmPackages:
    @trendyol-js/react-carousel: 2.0.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Dynamic show change does not work

Describe the bug

Hi,
I would like to the show props set a dynamic value and based on that render the elements in the carousel.
Unfortunately, only the first value is always remembered, the next value will not load until we resize the window (?).
Example: https://codepen.io/hubu999/pen/gOBERgY

Reproduction

Example: https://codepen.io/hubu999/pen/gOBERgY

Steps to reproduce:

1. Open codepen, as you can see the initial value is 4.
2. Click 'Set show to 3'. Then show value is now 3.
3. We have still 4 elements in carousel.
4. Resize window - we have 3 elements. We should see 3 elements without resizing.

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 827.73 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Safari: 16.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Arrow button not rendering correctly

I'm using the library to create a slideshow, the navigation button is just a simple HTML button and doesn't have the styling such as shown in the docs.
This is how I'm using the component

const SlideShow = () => (
  <Carousel className="carousel" slide={1} show={1} infinite={false} responsive={true}>
    {array.map(slide => (
      <div className="carousel-item">
        <h1>{slide.title}</h1>
        <ul>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
      </div>
    ))}
  </Carousel>
);
export default SlideShow;

Do I need to style the buttons myself? or is there an issue with how I'm using the library

Carousel not responding

Describe the bug

I tried just an example like Readme.md usage section. But Carousel is not showing anything on screen.

Result with Carousel tag: https://i.im.ge/2022/08/16/O2OnSS.1.png - nothing
Result with when using div as a Carousel tag: https://i.im.ge/2022/08/16/O2SAl6.2.png

Reproduction

https://github.com/zeraphosa1/trendyol_carousel_example/tree/main

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
    Memory: 7.11 GB / 15.86 GB
  Binaries:
    Node: 18.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (100.0.1185.36)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @trendyol-js/react-carousel: ^3.0.0 => 3.0.0

Used Package Manager

npm

Logs

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Add dots or pagination

Clear and concise description of the problem

Is it possible right now adding pagination or dots at the bottom of the slider ?

Suggested solution

.adding custom icons as dots

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Getting Minified React Error when running NPM RUN BUILD Next.Js

Describe the bug

Generating static pages (0/9)Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Z (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\@trendyol-js\react-carousel\node_modules\react\cjs\react.production.min.js:19:404) at Object.exports.useRef (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\@trendyol-js\react-carousel\node_modules\react\cjs\react.production.min.js:25:226) at exports.ScrollingCarousel (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\@trendyol-js\react-carousel\dist\cjs\index.js:1:9529) at Wc (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44) at Zc (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253) at Z (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) at Zc (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481) at Z (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) at $c (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98) at Zc (C:\Users\mmmmmmmm\Desktop\Web Dev\Jv\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:71:145)

This is my package.json

{ "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@trendyol-js/react-carousel": "^3.0.0", "next": "12.2.5", "react": "18.2.0", "react-dom": "18.2.0", }, "devDependencies": { "eslint": "8.11.0", "eslint-config-next": "12.1.0" } }

Reproduction

...

System Info

...

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Item re-renders on arrow press

Describe the bug

After clicking on the left / right arrow, all elements are re-rendering. This causes an issue, when you have some dynamic content inside

Reproduction

1. Add some dynamic content to the item (video/music)
2. Press left/right arrow

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
    Memory: 4.97 GB / 15.89 GB
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\frontend\node_modules\.bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @trendyol-js/react-carousel: ^2.0.1 => 2.0.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Compatability with Next.js?

Impressive initial work on this repository by first glance. Would really like to integrate it on a Next.js project, but seems to introduce a lot of bugs, which would be expected since it's SSR nature.

Using infinite with images causes images to rerender with each slide

Describe the bug

Using infinite slide with image items will cause the images to rerender each time you slide.

It happens because the items array is changed with each slide in this function:

react-carousel/src/helpers/index.ts

Line 141 in 42f1e19

export const initItems = (items: Item[], slide: number, infinite: boolean): Item[] => {

.

The result is a flicker of all images in the slider as the src is reloaded.

Reproduction

Use items with images.

System Info

System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 135.95 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.7.2 - ~/.nvm/versions/node/v17.7.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v17.7.2/bin/yarn
    npm: 8.5.2 - ~/.nvm/versions/node/v17.7.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: 99.0.1150.39
    Safari: 15.4

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• The provided reproduction is a minimal reproducible example of the bug.

Docs

Where i can find info about what props can i use and how use?