Slick: Blue border on click in Chrome

[daveyjones]

I'm getting blue outlines around each slide when clicking on a carousel in Chrome.

The fix is very easy:

.slick-list {
    outline: none;
}

Or possibly this, if there is risk of this getting overwritten:

.slick-list {
    outline: none !important;
}

I'm not familiar with the organization of this project, so I'll let someone more involved decide where to make this change (or whether it should be changed at all).

[simeydotme]

:weary:

It's been noted/raised many times.
Thanks for contributing! :) -- hope it didn't cause you too much trouble.

[pesh2000]

On a current project I actually needed

.slick-slide {
outline: none !important;
}

to get rid of the blue border.

[asadkn]

Seems like it is back. But this fixes it:

.slick-slide:focus { outline: none; }

[dhstack]

I had links inside my slides, so this worked for me:

.slick-slide {
  &:focus, a {
    outline: none;
  }
}

(by the way this is LESS, not CSS so it looks slightly different)

[dinglestein]

Thanks @dhstack :)

[Jtmichel]

I obliterated this using:

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

[samwilliscreative]

Brilliant, thanks @Jtmichel I was pulling my hair out with this one.

[Sitronik]

@Jtmichel thanks I fixed.

[fahimiali]

thanks... it worked for me in another project ...

[bengalamx]

Easy: .slick-slider * { outline: none; }

[Perezo123]

please where should i put this code... .slick-slider * { outline: none; } .. ive go the same problem but not in carousel but after closing img lightbox. Blue border copy anchor and image .. i want get rid of that.

[Jtmichel]

@Perezo123 can you send a URL or screenshot to example?

[Perezo123]

for example here ..

[Jtmichel]

The atomic solution is:

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

...but if you can send me a URL to this I can take a closer look.

[Perezo123]

here is url: http://adelek.sk/telgart/brezno.html

[Jtmichel]

@Perezo123 I navigated to the page but I don't see a slider, just a list of lightboxed items. I tried to call slick in the console but it doesn't seem to think it's a function. Is this the same as what you're seeing?

[Perezo123]

yes it is the same ... but like i said before i had this problem after closing img lightbox ... not with carousel :P i use here fancybox plugin but after closing image i had still that annoying blue outline all over "a" and "img"

[Jtmichel]

.container a { outline: 0; } will do the trick.

[Perezo123]

thanks this works perfect :P

[mehnich]

.slick-slide div { outline: none; }

[avinashmishra26]

I'm using angular 8 and ng-bootstrap 5.
You can apply this:

.carousel:focus {
outline: none;
}

[Vince-vegas]

Write this to your css file

.slick-slide div {
outline: none;
}