Slick.js elimina el resaltado azul alrededor de la imagen

4 minutos de lectura

avatar de usuario
ryan113

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 entender cómo hacer que deje de hacerlo. He probado el esquema: ninguno y el borde: ninguno y no he tenido éxito. Aquí está mi código

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 a la JSFiddle. Cuando abras el modal verás las imágenes dentro. Una vez que hace clic en una imagen, aparece un cuadro azul alrededor de la imagen. Eso es lo que estoy tratando de eliminar.

  • no puede reproducir el problema con su código, ¿puede ser más claro sobre el borde donde aparece, alrededor de la imagen?

    – Shehary

    9 de septiembre de 2015 a las 0:44

  • @Shehary Agregué un JSFiddle que señala mi problema. Agradezco cualquier ayuda.

    – Ryan113

    10 de septiembre de 2015 a las 2:28

  • La solución de @Kevin Jantzer es correcta, olvida mencionar en cuestión que el borde azul solo aparece en Chrome, si reviso su violín en Firefox, no hay borde azul al seleccionar la imagen

    – Shehary

    10 de septiembre de 2015 a las 3:12


necesitas usar outline: none;

Póntelo .slick-slide

.slick-slide {
    outline: none
}

Manifestación

  • Justo lo que necesitaba

    – Greivin López

    25 mayo 2017 a las 18:43

  • Acabo de resaltar a la derecha de la última imagen. Esto lo aclaró.

    – Alex Banman

    30/06/2017 a las 20:40

  • No funcionó, tuve que agregar esta propiedad a mi propio componente de diapositiva (que está dentro de la diapositiva deslizante), con react-slick: 0.26.1

    – Hecho en Luna

    23 de mayo de 2020 a las 8:25

avatar de usuario
Vince

Para reaccionar resbaladizo división la solución de hacer perfilar es:

.slick-slide div {
  outline: none;
 }

Prueba esto, me funciona. Necesitas agregar outline: none; para deslizador resbaladizo a etiqueta

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

Borré esto usando:

.slick-slide, .slick-slide *{ contorno: ninguno !importante; }

Si está pasando un componente de reacción a su carrusel elegante, es decir,

<Slider {...settings}>
 <CarouselItem/>
</Slider>

Descubrí que tenía que aplicar el outline: none; estilo a la <CarouselItem/> componente, en lugar de apuntar a cualquiera de los nativos slick-* clases

¿Ha intentado agregar esto en su etiqueta img?: style=”border-style: none”/ Pruébelo y vea si funciona.

avatar de usuario
phillipe.bojorquez

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 configura su deslizador deslizante en !important o cambia el código de arranque a a:focus : none; , esto lo arreglará.

  • Parece que bootstrap no se está utilizando en el violín suministrado, por lo que quizás esto debería ser un comentario en lugar de una respuesta.

    – Larry Turtis

    17 de noviembre de 2016 a las 0:50

¿Ha sido útil esta solución?