React-responsive-carousel: Carousel Arrows Styling

[xih]

Hi,

I'm trying to change the carousel arrows to arrows like this:

namely, AIRBNB arrows.

I'm been looking into the css code for lib/styles/carousel.css but I'm stuck.

Could you point me in the right direction, particularly which classes to modify ?

[leandrowd]

Hi @xih, check https://github.com/leandrowd/react-responsive-carousel/blob/master/src/components/_carousel.scss#L16

Lines 16 to 44 are the arrows. You can override these rules in your css to replace the arrows.

[mikkelwf]

@leandrowd What about overriding the arrow dom elements..?
Sometimes it's not possible to do the "styling" with css.
We utilize material design icons for arrows, and that requires new markup

[aarohmankad]

It may be conceivable to add prevArrowTemplate/nextArrowTemplate props? That way any React element can be passed to override the default arrows.

[ConnectWithNoor]

the .scss files aren't available in the library itself hence whatever we modify in .css will not render on screen. The screen still shows the old styling that is in present in .scss files.

Please fix the issue as @aarohmankad said , on you release next update. Thanks

[tiavina-mika]

Isn't it a bad practice to modify directly a file from an extern package?

[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;

}

[jithinsebastian2]

It may be conceivable to add prevArrowTemplate/nextArrowTemplate props? That way any React element can be passed to override the default arrows.

It may be conceivable to add prevArrowTemplate/nextArrowTemplate props? That way any React element can be passed to override the default arrows.

This method is not working for me.

[miralkumbhani]

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;

}

This method works for me perfectly fine. Thank you so much @jithinsebastian2 :)

[brannonglover]

I know this one is closed, but wanted to give some context as I was in this situation as well. I originally overwrote the styles through my own CSS, but then learned from their Storybook page, you can use props to correctly modify the CSS and make custom arrows.

http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic--with-custom-status-arrows-and-indicators

const arrowStyles: CSSProperties = {
    position: "absolute",
    top: ".7em",
    bottom: "auto",
    padding: ".4em",
    zIndex: 2,
};

<Carousel
          renderArrowPrev={(onClickHandler, hasPrev, label) =>
            hasPrev && (
              <button
                type="button"
                onClick={onClickHandler}
                title={label}
                style={{
                  ...arrowStyles,
                  right: "4.3em",
                  backgroundColor: "#000",
                }}
              >
                <ChevronLeftIcon />
              </button>
            )
          }
>

[vmachacek]

@brannonglover this is what I was looking for, thanks!