Slick: Border appearing around slide when navigated to...?

[jeremyswright]

Hi,

I've just implemented the slick-slider on a project and I'm seeing an inconsistency in behaviour. It may be down to my implementation or it may be the slick-slider but I've spent ages trying to track it down without success.

The site is http://www.form.uk.com and the issue happens on the slider on the front page. If you use the prev/next buttons the slide develops a faint border. Elsewhere on the site I'm using fade transitions (with no prev/next facility) and it's all fine. If you leave the slides on the front page to transition automatically there is no border. I can't even see the border in the dev tools but it's definitely there to see.

I'm no code ninja, but if someone could provide me with a pointer I'd be hugely grateful. That border is winding my client right up.

Many thanks.

[stephenmcghee]

Add this to the slick stylesheet:
.slick-slide {outline: none;}

[aaroncolon]

@jeremyswright, @SRTM is on the right track. the border is due to the last element gaining :focus when using the arrow navigation.

To remove the border, add .slick-slide:focus { outline: none; } to your CSS. However, be aware of the accessibility impact for users navigating via keyboard. You should define a different type of :focus style if you're concerned about supporting keyboard navigation.

This also appears to be a bug in Slick, as the last visible element in the slider gains :focus regardless of which arrow is used to navigate.

[jeremyswright]

Yes, that's fixed it. Many thanks. Much appreciated.

[miguelarian]

It worked, thanks

[fourroses666]

Doesn't work for the selected dot. (FF on Mac)

Also tried: .slick-slide, .slick-slide:focus *{outline:none!important;}

Could it be because of the areaxx="selected"?

[fourroses666]

Also on the demo site.

[rorych]

It seems to be a Problem inside Firefox, you can hide the outline with this:
button::-moz-focus-inner { border: 0; }

[fourroses666]

That works, thanks 👍

[mubasheerck]

Add this to the slick stylesheet:
.slick-slide {outline: none;}

Thanks a lot. It was fixed.