94
rated 0 times
[
96]
[
2]
/ answers: 1 / hits: 32983
/ 9 Years ago, tue, september 8, 2015, 12:00:00
I am using Slick.js to build a carousel inside a modal. Everything works perfectly until I click on an image. A blue border shows up and I unfortunately cannot figure out how to make it stop doing so. I've tried outline: none and border: none and have had no success. Here is my 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,
});
});
EDIT:
Here is a link to the JSFiddle. When you open the modal you will see the images inside. Once you click on an image a blue box appears around the image. That is what I am trying to remove.
More From » jquery
