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

Question

我们正在使用 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>

目标：

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

当前问题：

期望的输出

当前问题

期望的输出

Answer 1

您必须使用 position:absolute 作为插入符号，使用 position:relative 作为 .slick-current class...

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

...现在的问题是 .slick-slider .slick-list class 中的 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>

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

How to add caret below current slick element?

javascript

css

jquery

slick.js