*{box-sizing:border-box}
body{margin:0;padding:0;font-family:Arial;background:#f5f5f5}

[data-slider]{
  position:relative;
  width:100%;
  margin:auto;
  overflow:hidden;
  border-radius:10px;
  background:#000;
}

.track{
  display:flex;
  transition:transform .4s ease;
}

.slide{
  min-width:100%;
  position:relative;
  cursor:pointer;
}

.slide img{
  width:100%;
  height:auto;
  display:block;
}

.layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  pointer-events:none;
}

.bg{
  filter:blur(10px) brightness(.7);
  transform:scale(1.1);
}

.caption{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:15px;
  color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
}

button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;height:42px;
  border:none;border-radius:50%;
  background:rgba(0,0,0,.5);
  color:#fff !important;font-size:22px;
  cursor:pointer;
  z-index:2;
}

.prev{left:10px}
.next{right:10px}

.progress{
  position:absolute;
  bottom:0;left:0;
  height:4px;
  background:#fff;
  width:0%;
}