custom arrows in react splide
Custom Arrows in React Splide
If you're using React Splide, you might want to customize the arrows to match the design of your website. Fortunately, React Splide provides an easy way to do this.
Using Custom Images
The simplest way to customize the arrows is to use custom images. React Splide provides two props for this purpose: arrowPrevImage
and arrowNextImage
. Here's an example:
<Splide
arrowPrevImage="path/to/prev-arrow.png"
arrowNextImage="path/to/next-arrow.png"
>
<SplideSlide>Slide 1</SplideSlide>
<SplideSlide>Slide 2</SplideSlide>
<SplideSlide>Slide 3</SplideSlide>
</Splide>
In this example, we're using custom images for the arrows. You can replace "path/to/prev-arrow.png" and "path/to/next-arrow.png" with the actual paths to your arrow images.
Using Custom SVG Icons
If you want to use custom SVG icons instead of images, you can use the arrowPrevHtml
and arrowNextHtml
props. Here's an example:
<Splide
arrowPrevHtml="<svg viewBox='0 0 24 24'><path d='M10 17l5-5-5-5v10z'/></svg>"
arrowNextHtml="<svg viewBox='0 0 24 24'><path d='M14 7l-5 5 5 5V7z'/></svg>"
>
<SplideSlide>Slide 1</SplideSlide>
<SplideSlide>Slide 2</SplideSlide>
<SplideSlide>Slide 3</SplideSlide>
</Splide>
In this example, we're using custom SVG icons for the arrows. You can replace the contents of the <svg>
tags with your own SVG code.
Styling the Arrows
You can also style the arrows using CSS. React Splide provides two classes for this purpose: splide__arrow
and splide__arrow--prev
/splide__arrow--next
. Here's an example:
.splide__arrow {
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
}
.splide__arrow--prev {
background-image: url('path/to/prev-arrow.png');
}
.splide__arrow--next {
background-image: url('path/to/next-arrow.png');
}
In this example, we're using CSS to style the arrows. We're setting the width and height of the arrows to 40px, giving them a white background color, and adding a border-radius of 50% to make them circular. We're also using the .splide__arrow--prev
and .splide__arrow--next
classes to set custom images for the arrows.
These are just a few examples of how you can customize the arrows in React Splide. With a little creativity and CSS, you can create arrows that perfectly match the design of your website.