Adding more than one path to arrowShape

[andreangc19]

I am trying to add an arrow form with two paths. The code is <g> <path d="M39.1,54l45,45c2,2,5.2,2,7.1,0c2-2,2-5.1,0-7.1L49.8,50.4L91.2,9c2-2,2-5.1,0-7.1 c-2-2-5.2-2-7.1,0l-45,45C37.1,48.8,37.1,52,39.1,54z"/> <path d="M9.5,54l45,45c2,2,5.2,2,7.1,0c2-2,2-5.1,0-7.1L20.2,50.4L61.6,9c2-2,2-5.1,0-7.1 c-2-2-5.2-2-7.1,0l-45,45C7.5,48.8,7.5,52,9.5,54z"/> </g>

How can I make this work?

Test case: https://codepen.io/desandro/pen/azqbop

[tylerpaige]

Hey, Not sure if this is still a problem for you, but you can combine these two paths into a single path definition by joining the individual d attributes with a space between them. Please note that this works because your path are defined absolutely (which you can tell by the capital letters) not relatively (which use lowercase letters).

<path d="M39.1,54l45,45c2,2,5.2,2,7.1,0c2-2,2-5.1,0-7.1L49.8,50.4L91.2,9c2-2,2-5.1,0-7.1 c-2-2-5.2-2-7.1,0l-45,45C37.1,48.8,37.1,52,39.1,54z M9.5,54l45,45c2,2,5.2,2,7.1,0c2-2,2-5.1,0-7.1L20.2,50.4L61.6,9c2-2,2-5.1,0-7.1 c-2-2-5.2-2-7.1,0l-45,45C7.5,48.8,7.5,52,9.5,54z"></path>

If you find that you would prefer to keep them separate paths, you can always add event listeners to any item in your markup to control the flickity instance.

const el = document.getElementById('carousel');
const carousel = new Flickity(el);
const leftArrow = document.getElementById('left-arrow');
leftArrow.addEventListener('click', () => carousel.previous());

Hope that helps!

[andreangc19]

@tylerpaige your solution joining the two paths with a space works perfectly.

Thanks for your help!