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.