javascript - examples - slick slider tutorial

Slick.js quitar el resaltado azul alrededor de la imagen

Question

Estoy usando Slick.js para construir un carrusel dentro de un modal. Todo funciona perfectamente hasta que hago clic en una imagen. Aparece un borde azul y, lamentablemente, no puedo descubrir cómo hacer que deje de hacerlo. He intentado delinear: ninguno y borde: ninguno y no he tenido éxito. Aqui esta mi codigo

HTML:

<div id="openModal" class="modalDialog">
<div id ="background">
<a href="#close" title="Close" class="close">X</a>
<div id="logo">
<img src="/media/{{ gallery.logo }}" alt="Smiley face" height="100" width="150">
</div>
<div class="multiple-items">
<div><img src="/media/{{ gallery.image1 }}" height="200" width="300"></div>
<div><img src="/media/{{ gallery.image2 }}" height="200" width="300"></div>
<div><img src="/media/{{ gallery.image3 }}" height="200" width="300"></div>
<div><img src="/media/{{ gallery.image4 }}" height="200" width="300"></div>
<div><img src="/media/{{ gallery.image5 }}" height="200" width="300"></div>
<div><img src="/media/{{ gallery.image6 }}" height="200" width="300"></div>
</div>
</div>
</div>

CSS:

/* Slider */
.slick-slider {
margin: 110px 35px 0 0;
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before, .slick-track:after {
display: table;
content:'''';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir=''rtl''] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
background-color: green;
border: none;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slider {
width: 80%;
margin: 40px 0 0 100px;
}
.lower {
margin-top: 100px;
}
.slick-slide {
color: white;
padding: 30px;
font-size: 30px;
font-family:"Arial";
margin: 0 -50px 0 0;
}
.slick-prev:before, .slick-next:before {
color: black;
}
.slick-slide:nth-child(1), .slick-slide:nth-child(3), .slick-slide:nth-child(5), .slick-slide:nth-child(7), .slick-slide:nth-child(9), .slick-slide:nth-child(11) {
}
.slick-slide slick-current slick-active {
display: none;
color: red;
}
.slick-slide slick-active {
display: none;
}
.slick-active img {
outline: 0 !important;
border:0 none !important;
}
.multiple-items img {
outline: 0 !important;
border:0 none !important;
}

JQuery:

$(document).ready(function(){
$(''.multiple-items'').slick({
infinite: false,
arrows: false,
slidesToShow: 3,
slidesToScroll: 1,
});
});

EDITAR:

Aquí hay un enlace al JSFiddle . Cuando abres el modal verás las imágenes dentro. Una vez que haga clic en una imagen, aparecerá un cuadro azul alrededor de la imagen. Eso es lo que estoy tratando de eliminar.

Answer 1

¿Ha intentado agregar esto a su etiqueta img ?: style = "border-style: none" / Intente eso y vea si funciona.

Answer 2

Intenta esto es un trabajo para mí. Necesitas agregar un outline: none; para slick slider a etiqueta

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

Answer 3

Lo borré usando:

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

Answer 4

Necesitas usar el outline: none;

Ponlo en .slick-slide

.slick-slide {
outline: none
}

Demo

Answer 5

Si está utilizando bootstrap, tenga en cuenta que la configuración de a: focus dentro de ese código también hará que aparezca ese borde azul. Si configuras tu slick-slide a! Important o cambias el código de arranque a a: focus: none; , esto lo arreglará.