如何自定义和设置一些文本到圆滑的轮播点？

Question

我需要像这样的点：

看到了吗？ 我必须将指标放在转盘上方，并在其中输入一些文字。文本下方的红色边框应根据轮播的当前位置从整个屏幕过渡。

在这里您可能会看到一个可以玩耍的示例：

https://codepen.io/anon/pen/PdwQRo

这是一些CSS：

.main{
  width: 560px;
  margin:0 auto;
}
.slick-slide{
  overflow:hidden;
  height: 310px;
  position: relative;
  z-index:999;
}
.slick-slide img{
  transition: width 0.5s;
  height: auto;
  width:100%;
}
.slick-list img{
  width:100%;
  height: auto;
}
.slick-dots li{
  width: 25%;
  display:inline-block;
  margin:0;
  height: auto;
  padding:20px 10px;

}
.slick-dots li img{
  width:100%;
  height: 100px;
  object-fit:cover;
  border-radius:6px;
  transition: 0.5s;
  border: 1px solid #fff;
  padding:5px;
}

.slick-dots{
  position: relative;
  text-align:left;
  bottom: 0;
}