javascript Slick.js 移除图像周围的蓝色高光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32468430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick.js remove blue highlight around image
提问by Ryan113
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
我正在使用 Slick.js 在模态中构建轮播。一切正常，直到我单击图像。出现蓝色边框，不幸的是我无法弄清楚如何让它停止这样做。我尝试过大纲：无和边界：无，但没有成功。这是我的代码
HTML:
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:
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.
这是JSFiddle的链接。当您打开模态时，您将看到里面的图像。单击图像后，图像周围会出现一个蓝色框。这就是我要删除的内容。
回答by Kevin Jantzer
回答by Udara
Try this it's work for me. You need to add outline: none;for slick slider atag
试试这个对我有用。您需要添加outline: none;光滑的滑块a标签
.slick-slide {
&:focus, a {
outline: none;
}
}
回答by Amirshad
I obliterated this using:
我使用以下方法消除了这一点：
.slick-slide, .slick-slide *{ outline: none !important; }
.slick-slide, .slick-slide *{ 大纲：无 !important; }
回答by Richard PK
If you are passing a react Component into your slick carousel, i.e.
如果您将反应组件传递到光滑的轮播中，即
<Slider {...settings}>
<CarouselItem/>
</Slider>
I found that I had to apply the outline: none;style to the <CarouselItem/>component, rather than targeting any of the native slick-*classes.
我发现我必须将outline: none;样式应用于<CarouselItem/>组件，而不是针对任何本机slick-*类。
回答by kfreeman04208
Have you tried to add this into your img tag?: style="border-style: none"/ Try that and see if it works.
您是否尝试将其添加到您的 img 标签中？：style="border-style: none"/ 试试看是否有效。
回答by phillipe.bojorquez
If you are using bootstrap, beware that the a:focus settings within that code will also cause that blue border to appear. If you either set your slick-slide to !important or change the bootstrap code to a:focus : none; , this will fix it.
如果您使用引导程序，请注意该代码中的 a:focus 设置也会导致出现蓝色边框。如果您将 slick-slide 设置为 !important 或将引导代码更改为 a:focus : none; ，这将解决它。
