我们正在使用 Slick Carousel并需要在当前事件元素下方添加一个插入符号。为此,我们有以下内容。
我们曾尝试使用 :after 元素,但它不起作用。我们如何才能在蓝色边框外的当前选定元素下方添加插入符号?
我们发现的问题是 .slick-current 有 overflow: hidden,它与 :after 元素冲突。但是,轮播需要 overflow: hidden 才能正常工作。
CSS 分解:
- 蓝色边框代表我们希望插入符所在的外部容器
- 红色标记当前事件的幻灯片
$(function() {
$('.carousel').slick({
arrows: true,
focusOnSelect: true,
infinite: false,
centerMode: true,
variableWidth: true
});
});
.carousel {
color: black;
display: block;
}
.flex {
border: 1px solid blue;
}
.carousel > .item {
background: black;
color: white;
border: 1px solid red;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.slick-slide {
padding: 10px;
}
.slick-current {
color: red;
}
.slick-current:after {
content: '';
border-top: 10px solid blue;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: 100%;
display: block;
height: 0;
width: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="flex">
<div class="carousel">
<div class="item">
tab name - tab 1
</div>
<div class="item">
tab name - tab 2
</div>
<div class="item">
tab name - tab 3
</div>
<div class="item">
tab name - tab 4
</div>
<div class="item">
tab name - tab 5
</div>
<div class="item">
tab name - tab 6
</div>
</div>
</div>
</div>
</div>
</div>
目标:
- 让插入符显示在事件元素下方,但也显示在蓝色边框之外
最佳答案
您必须使用 position:absolute
作为插入符和 position:relative 到 .slick-current
类...
...使用bottom:10px
和transform
使插入符图标居中...
...现在的问题是 .slick-slider .slick-list
类中的 overflow:hidden
阻止了蓝色之外的箭头图标的可见性边框...
...所以要修复将 overflow:visible
设置为 .slick-slider .slick-list
并将你的 flex
div 包装到另一个 div .overflow
具有 overflow:hidden
和 padding-bottom:15px
用于插入符号的可见性
堆栈片段
$(function() {
$('.carousel').slick({
arrows: true,
focusOnSelect: true,
infinite: false,
centerMode: true,
variableWidth: true
});
});
.carousel {
color: black;
display: block;
}
.flex {
border: 1px solid blue;
}
.carousel>.item {
background: black;
color: white;
border: 1px solid red;
}
.slick-slider .slick-list {
width: auto;
margin: 0 auto;
height: auto;
overflow: visible;
}
.slick-slide {
padding: 10px;
}
.slick-current {
color: red;
position: relative;
}
.slick-current:after {
content: '';
border-top: 10px solid blue;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: 100%;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.overflow {
overflow: hidden;
padding-bottom: 15px;
}
/*Remove blue glow on focus*/
add .item {
-moz-appearance: none;
-webkit-appearance: none;
border: 1px solid #ddd;
}
.item:focus {
border: 1px solid #ccc;
box-shadow: none !important;
outline: none !important;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="overflow">
<div class="flex">
<div class="carousel">
<div class="item">
tab name - tab 1
</div>
<div class="item">
tab name - tab 2
</div>
<div class="item">
tab name - tab 3
</div>
<div class="item">
tab name - tab 4
</div>
<div class="item">
tab name - tab 5
</div>
<div class="item">
tab name - tab 6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
关于javascript - 如何在当前光滑元素下方添加插入符号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48814112/