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.