Relume Community Icon
Relume Community
  • 馃彔Home
  • 馃搮Events

  • 馃數Announcements
  • 馃數General
  • 馃數Getting Started
  • 馃數Issues
  • 馃數Showcase

Powered by Tightknit
General
General

Implementing Hover Arrows for Splide.js Slider Interaction

Avatar of Joel T.Joel T.
路

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

馃1

3 comments

  • Avatar of Emily M.
    Emily M.
    路

    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%.

  • Avatar of Emily M.
    Emily M.
    路

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

  • Avatar of Joel T.
    Joel T.
    路

    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