Arrow button is not displaying

[GnanaAjana]

I tried simple example provided in this docs. arrow icon is not showing.

So previous and next image i can't able to move.

tried options for carousel: plugins={['arrows']}

[Wekananda]

Same here, also all plugins can't be loaded

[thelittlehawk]

Have you tried following <Carousel arrows />

[GnanaAjana]

May i know how to give custom arrows?

[helloalexdodd]

Having the same issue. It looks like only the v1 way is working right now.

[soly2014]

same here

[willbonney]

Also having this issue and using arrows staggers all the images into a single view:

          <Carousel arrows>
            <img src="https://placekitten.com/500/300" />
            <img src="https://placekitten.com/500/400" />
            <img src="https://placekitten.com/500/200" />
          </Carousel>

[pklepa]

Have you tried following <Carousel arrows />

I was having the same problem and this solved! I also customized the arrows by overriding its class in CSS.

[Vladis466]

I belive thats because the package is defaulting to installing version 1.

[al13bash]

@Vladis466 I've explicitly installed version 2 and still had similar issues

[andreecosta]

I belive thats because the package is defaulting to installing version 1.

Yep, you are right. I've installed using npm install @brainhubeu/react-carousel@2.0.1 and I can see the arrows now. Thanks!

[chasinhues]

I belive thats because the package is defaulting to installing version 1.

I'm on latest version (2.0.1) using the approach mentioned in the docs:

<Carousel
  plugins={['arrows']}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

I thought it might have been an issue with the CSS perhaps, but the arrows are not even being rendered to the DOM.

[jannikkeye]

I thought it might have been an issue with the CSS perhaps, but the arrows are not even being rendered to the DOM

Can confirm this with the latest version. No elements are rendered in the dom.

[withewolf-dev]

I belive thats because the package is defaulting to installing version 1.

I'm on latest version (2.0.1) using the approach mentioned in the docs:

<Carousel
  plugins={['arrows']}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

I thought it might have been an issue with the CSS perhaps, but the arrows are not even being rendered to the DOM.

How did Got on the latest version ? If you do npm install @brainhubeu/react-carousel I get v1.19.26

[CitizenBeta]

@withewolf-dev change your package.json to this:

"dependencies": {
    "@brainhubeu/react-carousel": "^2.0.0",

[Amheklerior]

I've had the same problem, working on a react/typescript project.

I was using the following Dependencies:

• react: "17.0.1"
• react-dom: "17.0.1"
• @brainhubeu/react-carousel: "2.0.2"

and devDevendencies:

• typescript: "4.1.3"
• @types/brainhubeu__react-carousel: "2.0.2"

Downgrading react and react-dom versions to 16.8.0 (which seem to be peer dependencies of the 2.0.2 version of the library) solved the issue for me.

PS. I solved the problem for all plugins (not only the arrows)

[katiawheeler]

Any update on this? Also experiencing this issue.

[coopdog95]

May i know how to give custom arrows?

I got arrows and custom arrows to work from passing in the plugin options as props directly to the Carousel component:

<Carousel
  value={currentItemIndex}
  onChange={this.handleChange}
  arrows
  arrowLeft={this.generateArrow('left')}
  arrowLeftDisabled={this.generateArrow('left', true)}
  arrowRight={this.generateArrow('right')}
  arrowRightDisabled={this.generateArrow('right', true)}
  addArrowClickHandler
>
  {this.generateSlides()}
</Carousel>

I did not need to import any plugins, just the Carousel! And in case you're wondering, generateArrow() looks like this:

generateArrow = (direction, disabled = false) => {
    const icon = direction === 'left'
      ? <KeyboardArrowLeftIcon />
      : <KeyboardArrowRightIcon />
    const indexChange = direction === 'left' ? -1 : 1
    return (
      <button
        disabled={disabled}
        className={css.arrowButton}
        onClick={() => this.moveIndex(indexChange)}
      >
        {icon}
      </button>
    )
  }

Note: make sure you add addArrowClickHandler as a prop to the Carousel to tell it you're moving the current index yourself. Happy coding!

"react": "^16.13.1" "@brainhubeu/react-carousel": "^1.19.26"

[T0x1c-Devel0per]

Hello, you must add this line of code. <Carousel <br> plugins={[ { resolve: arrowsPlugin, } ]}