Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Leanne D
Leanne D
4,550 Points
Posted by Leanne D
Leanne D
4,550 Points

Slick Slider custom navigation cursor

I'm having issues with a slick slider that a client wants. They basically want custom cursors as the navigation, and on click of the right half of the slide, it slides right, and clicking the left, slides left.

I've achieved this by making the two buttons full height and 50% width of the slide and set the custom cursor. It works great, apart from I can't click any links in that slide now, because the buttons are over teh top of the slide content - please see an example here: https://codepen.io/pixelboutiqueuk-the-lessful/pen/zYrZJgQ?editors=0100

NOTE: Just a note, not sure if this is happening for anyone else, but sometimes the slick css isn't loading on codepen, so you need to add in: //cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css in the CSS settings :/

1 Answer

Kosha Burnett
Kosha Burnett
3,340 Points
Kosha Burnett
Kosha Burnett
3,340 Points

Hi Leanne,

Perhaps if you explain this issue to the client and include that it creates a bad user experience, they'd be willing to go with a compromised suggestion. What about tall arrows that are ~ 50px wide and full height on either side of the slide?