Ответ 1
Вам нужно использовать outline: none;
Поместите его на .slick-slide
.slick-slide {
outline: none
}
Я использую Slick.js для создания карусели внутри модального. Все работает отлично, пока я не нажму на изображение. Появляется синяя рамка, и я, к сожалению, не могу понять, как заставить ее прекратить это делать. Я пробовал наброски: нет и границы: нет и не имел успеха. Вот мой код
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,
});
});
ИЗМЕНИТЬ:
Вот ссылка на JSFiddle. Когда вы открываете модальный, вы увидите изображения внутри. Когда вы нажимаете на изображение, вокруг изображения появляется синяя рамка. Это то, что я пытаюсь удалить.
Вам нужно использовать outline: none;
Поместите его на .slick-slide
.slick-slide {
outline: none
}
Попробуй, это сработает для меня. Вам нужно добавить outline: none;
для слайдера a
tag
.slick-slide {
&:focus, a {
outline: none;
}
}
Я уничтожил это, используя:
.slick-slide,.slick-slide * {контур: нет! важно; }
Вы пытались добавить это в свой тег img?: style = "border-style: none" / Попробуйте это и посмотрите, работает ли он.
Если вы используете bootstrap, остерегайтесь того, что параметры a: focus в этом коде также вызывают появление синей границы. Если вы либо установите свой слайк-слайд на! Важно, либо измените код начальной загрузки на: focus: none;, это исправит его.
Если вы передаете реагирующий компонент в свою гладкую карусель, то есть
<Slider {...settings}>
<CarouselItem/>
</Slider>
Я обнаружил, что должен был применить стиль outline: none;
к компоненту <CarouselItem/>
, а не нацелиться на какой-либо из собственных классов slick-*
.