React-responsive-carousel: Option for customizable left/right arrows

[adomoshe]

Hi,

First I wanted to say thanks for an amazing package! I use this in multiple places on my website and its great.

I incorporate Fontawesome svgs once in a while and thought it would be a nice to stick those or any other applicable image/png/svg as the left/right arrows on the carousel.

Any thoughts?

I'd be more than happy to help work on this if you guys think its worthwhile!

[larsmaultsby]

Couldn't you just use CSS to override the arrow styles?

[adomoshe]

I think that would require each button have an id to be able to target it with CSS.

[XoBpawok]

Better would be just give possibility to use component methods.

[jithinsebastian2]

I think we can replace the Forward arrow and Backward arrow with custom images by using,
.control-next: before and .control-next default CSS classes which are providing by Courousel package itself. I successfully achieved this by the below method.

$Iconpath: '../../assets/images/'; //My image icon's path

.control-prev:before {
content: url($Iconpath+'previous-arrow.svg') !important;
}
[dir='rtl'] .control-prev:before {
content: url($Iconpath+'previous-arrow.svg') !important;
}

.control-next:before {

    content: url($Iconpath+'next-arrow.svg') !important;
}
[dir='rtl'] .control-next:before {

    content: url($Iconpath+'next-arrow.svg') !important;
}

[sezna]

@adomoshe as this solves your problem, I'm going to close this issue. Feel free to re-open or file a PR if you find a better method.