带计时器的水平计时器问题

Posted 2023-01-16

如何在下面的文章中使用滑动器实现在水平计时器中的第一个元素之前和最后一个元素之后删除水平线，我在CSS中删除了left：42％，因此它向左移动以删除左边的水平线，但是右边的水平线不能删除-

.status span:before 
 content: '';
 width: 25px;
 height: 25px;
background-color: #e8eeff;
border-radius: 25px;
border: 4px solid #3e70ff;
position: absolute;
top: -15px;
**left: 0%;**
transition: all 200ms ease-in;

codepen Horizontal Timeline swipper

答案

我建议在每个swiper-slide内部使用一个spacer元素，该元素仅在第一个和最后一个元素内部可见。它也具有与旧答案相同的限制，背景需要具有统一的颜色。

html代码

<div class="swiper-container"> <div class="swiper-wrapper timeline"> <div class="swiper-slide" v-for="item in steps"> <div class="status"> <span>item.title</span> <div class="overlapper"></div> </div> </div> </div> </div>

.overlapper background-color: white; position: absolute; width: 50%; height: 4px; z-index: 1; top: -4px; display: none; .swiper-slide:first-child .overlapper left: 0; display: block; .swiper-slide:last-child .overlapper right: 0; display: block;

https://codepen.io/AlexWayhill/pen/XWmYyvJ

<div class="swiper-wrapper timeline"> <div class="swiper-terminator swiper-left"></div> <div class="swiper-slide" v-for="item in steps"> <div class="status"> <span>item.title</span> </div> </div> <div class="swiper-terminator swiper-right"></div>

.swiper-terminator.swiper-left left: 0; .swiper-terminator.swiper-right right: 0; .swiper-terminator background-color: white; position: absolute; width: 20px; padding: 20px; height: 30px; z-index: 1; .status span /* Add the z-index to position the bubble over the terminator */ z-index: 3; .timeline position: relative;

https://codepen.io/AlexWayhill/pen/KKderQx

另一答案

由于线是元素与文本的边界，所以它永远不会比元素/文本本身小。

我建议使用您需要的宽度而不是边框​​的额外元素。

为此，只需删除行

border-top: 4px solid #3e70ff;

从您的CSS类.status中添加以下CSS类：
.status:before 
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 100%;
  left: 0;
  background-color: #3e70ff;

.swiper-slide:first-of-type .status:before 
  width: 50%;
  left: 50%;

.swiper-slide:last-of-type .status:before 
  width: 50%;