SwiperJS append navigation

Design help Custom code
1

G’day everyone,

I’m using SwiperJS in this client build and am having trouble with appending the navigation arrows to the swiper. Typically when using the swiper, you would be able to have the navigation arrows as children of the swiper. However, I’m using a collection list wrapper as the swiper and Webflow doesn’t allow any other children than the collection list itself.
I’m trying to append the arrows to the collection list wrapper but have had great difficulty doing so. Could I have some help please?
*Navigation arrows are in ‘.hide’ div, have tried with them outside of it.
**Site used for reference: TRicks SwiperJS

Thanks so much!
Chas

Here is my site Read-Only:
https://preview.webflow.com/preview/6701community?utm_medium=preview_link&utm_source=designer&utm_content=6701community&preview=e4796778726c800c8640b832678caa7c&pageId=65363074e73b9162ff960e79&workflow=preview

2

Hey Chas,

Swiperjs has a create elements mode which is often used in Webflow to simply create those nav controls.

However if you want, Swiperjs doesn’t actually care if they’re outside of the swiper, you just have to then deal with positioning separately.

I’ve some notes here, this part especially;

3

Thanks so much mate.
Absolute lifesaver!

1 Like