Slick Slider 上的自定义 V 形和圆圈 - 单击后圆圈消失
Posted
技术标签:
【中文标题】Slick Slider 上的自定义 V 形和圆圈 - 单击后圆圈消失【英文标题】:Custom chevron and circle on Slick Slider - circle disappears after clicking 【发布时间】:2017-11-15 06:44:36 【问题描述】:我已经为 Slick Slider Carousel 创建了一个带有圆圈的自定义左右 V 形,但是当我单击左或右 V 形时,圆圈会消失。当我在圆圈外单击或单击对面的 V 形时,圆圈会返回。我认为这与覆盖当前元素的 before 伪类有关。有人可以帮助我并解释我做错了什么吗?我有一个工作的JS Fiddle here。我不知道为什么 CSS 没有首先加载到这里的代码 sn-p 中,所以你看不到它在这里工作。检查 JSFiddle 之一,谢谢。
$('.carousel-one').slick(
arrows: true,
infinite: true,
speed: 1000,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 2000
);
.slick-next:before
content: '';
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #333;
border-right: 2px solid #333;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
.slick-prev:before
content: '';
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #333;
border-right: 2px solid #333;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
.slick-prev:hover,
.slick-next:hover
background-color: rgba(255, 255, 255, 0.7);
width: 45px;
height: 45px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
.slick-prev:hover
padding-left: 8px;
.slick-next:hover
padding-right: 8px;
.slick-next
right: 20px;
padding-right: 8px;
background-color: rgba(255, 255, 255, 0.5);
width: 45px;
height: 45px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
.slick-prev
left: 20px;
padding-left: 8px;
background-color: rgba(255, 255, 255, 0.5);
width: 45px;
height: 45px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" ></div>
<div><img src="http://lorempixel.com/400/200" ></div>
<div><img src="http://lorempixel.com/300/200" ></div>
<div><img src="http://lorempixel.com/320/200" ></div>
<div><img src="http://lorempixel.com/400/200" ></div>
<div><img src="http://lorempixel.com/200/200" ></div>
<div><img src="http://lorempixel.com/300/200" ></div>
</div>
【问题讨论】:
【参考方案1】:当点击按钮时,焦点在。有一个 css 伪选择器 :focus
以处于焦点状态的元素为目标。您需要覆盖焦点元素的现有样式,如下例所示
.slick-prev:focus, .slick-next:focus
background-color: rgba(255, 255, 255, 0.5) !important;
【讨论】:
以上是关于Slick Slider 上的自定义 V 形和圆圈 - 单击后圆圈消失的主要内容,如果未能解决你的问题,请参考以下文章
可在 Slick-slider 中拖动的 jQuery UI