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