如何在当前光滑元素下面添加插入符号？

Question

我们正在使用Slick Carousel，需要在当前活动项目下添加插入符号。为此，我们在下面有以下内容。

我们尝试使用：after元素但不起作用。我们如何能够在蓝色边框之外的当前所选项目下添加插入符号？

我们发现的问题是.slick-current有溢出：隐藏，它与：after元素冲突。但是，旋转木马需要溢出：隐藏才能正常工作。

CSS细分：

1. 蓝色边框表示我们希望插入符号驻留的外部容器
2. 红色标记当前活动幻灯片
＆＃13;
＆＃13;
$(function() {
  $('.carousel').slick({
    arrows: true,
    focusOnSelect: true,
    infinite: false,
    centerMode: true,
    variableWidth: true
  });
});
＆＃13;
.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;
}
＆＃13;
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

目标：

1. 让插入符号显示在活动项目下方，但也显示在蓝色边框之外

当前问题：

期望的输出

当前的问题

期望的输出

Answer 1

您必须使用position:absolute作为插入符号和位置：相对于.slick-current类...

...使用bottom:10px和transform将插入符号图标居中......

...现在overflow:hidden类中的问题是.slick-slider .slick-list，这会阻止箭头图标在蓝色边框外的可见性...

...以便将overflow:visible设置为.slick-slider .slick-list并将flex div包装到另一个.overflow overflow:hidden和padding-bottom:15px的div $(function() { $('.carousel').slick({ arrows: true, focusOnSelect: true, infinite: false, centerMode: true, variableWidth: true }); });中为了发现插入符号

Stack Snippet

.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>

related_name