Slick.js entfernt die blaue Hervorhebung um das Bild herum

Lesezeit: 4 Minuten

Benutzer-Avatar
Ryan113

Ich verwende Slick.js, um ein Karussell in einem Modal zu bauen. Alles funktioniert perfekt, bis ich auf ein Bild klicke. Es erscheint ein blauer Rand und ich kann leider nicht herausfinden, wie ich das stoppen kann. Ich habe Gliederung: keine und Grenze: keine ausprobiert und keinen Erfolg gehabt. Hier ist mein 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,

});
  });

BEARBEITEN:

Hier ist ein Link zum JSFiddle. Wenn Sie das Modal öffnen, sehen Sie die Bilder darin. Sobald Sie auf ein Bild klicken, erscheint ein blaues Kästchen um das Bild herum. Das versuche ich zu entfernen.

  • nicht in der Lage, das Problem mit Ihrem Code zu reproduzieren, können Sie den Rand, an dem es erscheint, um das Bild herum klarer darstellen?

    – Shehary

    9. September 2015 um 0:44 Uhr

  • @Shehary Ich habe ein JSFiddle hinzugefügt, das auf mein Problem hinweist. Schätzen Sie jede Hilfe.

    – Ryan113

    10. September 2015 um 2:28 Uhr

  • @Kevin Jantzer-Lösung ist richtig, Sie vergessen zu erwähnen, dass der blaue Rand nur in Chrom angezeigt wird. Wenn ich Ihre Geige in Firefox überprüfe, gibt es bei der Auswahl des Bildes keinen blauen Rand

    – Shehary

    10. September 2015 um 3:12 Uhr


Sie müssen verwenden outline: none;

Zieh es an .slick-slide

.slick-slide {
    outline: none
}

Demo

  • Genau das, was ich brauchte

    – Greivin López

    25. Mai 2017 um 18:43 Uhr

  • Ich hatte gerade ein Highlight rechts vom letzten Bild. Damit hat es sich aufgeklärt.

    – Alex Banmann

    30. Juni 2017 um 20:40 Uhr

  • Hat nicht funktioniert, ich musste diese Eigenschaft zu meiner eigenen Folienkomponente (die sich innerhalb der Slick-Folie befindet) mit React-Slick hinzufügen: 0.26.1

    – Hergestellt im Mond

    23. Mai 2020 um 8:25 Uhr

Benutzer-Avatar
Vince

Zum Reagieren glatt auf Abt Die Lösung für das Umreißen ist:

.slick-slide div {
  outline: none;
 }

Versuchen Sie dies, es ist Arbeit für mich. Sie müssen hinzufügen outline: none; für glatten Schieber a Schild

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

Ich habe dies ausgelöscht mit:

.slick-slide, .slick-slide *{ Gliederung: keine !wichtig; }

Wenn Sie eine reagierende Komponente in Ihr glattes Karussell leiten, dh

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

Ich fand, dass ich das anwenden musste outline: none; Stil zum <CarouselItem/> Komponente, anstatt auf eine der nativen abzuzielen slick-* Klassen.

Haben Sie versucht, dies in Ihr img-Tag einzufügen?: style=”border-style: none”/ Probieren Sie das aus und sehen Sie, ob es funktioniert.

Benutzer-Avatar
phillipe.bojorquez

Wenn Sie Bootstrap verwenden, beachten Sie, dass die a:focus-Einstellungen in diesem Code auch dazu führen, dass dieser blaue Rand angezeigt wird. Wenn Sie entweder Ihren Slick-Slide auf !important setzen oder den Bootstrap-Code in a:focus : none; , das wird es beheben.

  • Es scheint, dass Bootstrap in der mitgelieferten Geige nicht verwendet wird, also sollte dies vielleicht eher ein Kommentar als eine Antwort sein.

    – Larry Turtis

    17. November 2016 um 0:50 Uhr

1169680cookie-checkSlick.js entfernt die blaue Hervorhebung um das Bild herum

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy