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

Question

我们正在使用 Slick Carousel并需要在当前事件元素下方添加一个插入符号。为此，我们有以下内容。

我们曾尝试使用 :after 元素，但它不起作用。我们如何才能在蓝色边框外的当前选定元素下方添加插入符号？

我们发现的问题是 .slick-current 有 overflow: hidden，它与 :after 元素冲突。但是，轮播需要 overflow: hidden 才能正常工作。

CSS 分解:

1. 蓝色边框代表我们希望插入符所在的外部容器
2. 红色标记当前事件的幻灯片

$(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>

目标:

1. 让插入符显示在事件元素下方，但也显示在蓝色边框之外

目前的问题:

期望的输出

当前问题

期望的输出

Answer 1

您必须使用 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>