web-dev-qa-db-fra.com

Slick.js supprime la surbrillance bleue autour de l'image

J'utilise Slick.js pour construire un carrousel à l'intérieur d'un modal. Tout fonctionne parfaitement jusqu'à ce que je clique sur une image. Une bordure bleue apparaît et je ne peux malheureusement pas comprendre comment l'arrêter. J'ai essayé le contour: aucun et la bordure: aucun et je n'ai eu aucun succès. Voici mon code

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,

});
  });

ÉDITER:

Voici un lien vers JSFiddle . Lorsque vous ouvrez le modal, vous verrez les images à l'intérieur. Une fois que vous avez cliqué sur une image, une boîte bleue apparaît autour de l'image. C'est ce que j'essaie de supprimer.

javascriptjquerycssslick.js
19
Ryan113

Vous devez utiliser outline: none;

Mettez-le .slick-slide

.slick-slide {
    outline: none
}

Démo

39
Kevin Jantzer

Essayez ça, ça marche pour moi. Vous devez ajouter outline: none; pour slick slider a tag

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

J'ai effacé cela en utilisant:

.slick-slide, .slick-slide * {contour: aucun! important; }

1
Amirshad

Si vous utilisez le bootstrap, sachez que les paramètres a: focus dans ce code feront également apparaître cette bordure bleue. Si vous définissez votre slick-slide sur! Important ou changez le code bootstrap en a: focus: none;, cela le corrigera.

0
phillipe.bojorquez

Avez-vous essayé d'ajouter ceci dans votre balise img?: Style = "border-style: none"/Essayez cela et voyez si cela fonctionne.

0
kfreeman04208

Si vous passez un composant React dans votre carrousel lisse, c.-à-d.

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

J'ai constaté que je devais appliquer le outline: none; style au <CarouselItem/>, plutôt que de cibler l'un des composants natifs slick-* Des classes.

0
Richard PK