Community forum for knowledge and support

Updated 7 months ago

Customizing the navigation arrows in a splide.js slider

At a glance

The community member is using the Splide.js library to implement a slider, and they want to remove the default arrows and instead have arrows that appear only when the user hovers on the left or right side of the screen. The community members discuss potential solutions, such as setting the initial opacity of the arrows to 0% and increasing the size of the hover interaction area. However, there is no explicitly marked answer provided.

Hey all anyone with any experience with splide js? I implemented a slider with splide.js from tutorial I watch by Timothy Ricks. Everything works great but I was hoping to remove the arrows and use a interaction I have seen where when you hover on the right side of the screen a right arrow appears and when on the left side of the screen a left arrow appears. And if clicked will take you either left or right depending on what side of the screen you are on. Has anyone got any experience with this or knows a tutorial to see how effect is achieved?

Cheers Joel

E
J
3 comments

I haven't done this myself, but I would imagine you would need to set the opacity of the arrow to 0% initially, and when a user hovers over the section the opacity becomes 100%.

I would suggest making the hover interaction trigger much larger than the arrows themselves

okay thanks Emily. I was having issues with the embed that housed the arrows 100% height of the slider and 50% for each the right and the left, yet only the small arrow was still clickable

Add a reply
Sign up and join the conversation on Slack