jquery - Adjust overlay width to Slick Carousel

Question

I'm having problems trying to make a overlay effect on the slick carousel. The idea is to position the text on the center of the block but when the widht is 100% it fills the whole lenght of the carousel, not the parent block. Here is how it looks right now:

HTML:

<div class="slider-wr" >
  <div class="slider">
    <div class="container">
      <div class="item" >
        <div class="image" style="background-image: url(https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png)">
        </div>
        <div class="overlay">
          <span>
            TEXT
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.slider-wr {
  width: 70%;
  height: auto;
  margin: 30px auto 0px;
}

.image {
  background-position: center;
  background-size: cover;
  overflow: hidden;
  height: 150px;
}

.container {
  align-content: center;
  text-align: center;
}

.item .overlay{
  position: absolute;
  opacity: 0;
  bottom: 0;
  color: #F2F2F2;
  transition: .5s ease;
  background-color: rgba(0, 0, 5, 0.5);
  height: 100%;
  width: 150px;
}

.overlay span{
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.item:hover .overlay{
  opacity: 1;
}

JS:

$('.slider').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  infinite: true,
  responsive: [
    {
      breakpoint: 550,
      settings: {
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: true,
      }
    },
  ]
});

Here is a link: https://codepen.io/anon/pen/gKKKvP

标签： jquerycss

Answer 1

试试这个https://codepen.io/anon/pen/vrraex

我改变了这个：

• 添加position:relative到.itemdiv
• 在div中使用width:100%而不是width:150px.overlay

---

.item .overlay {
  ...
  // width: 150px;
  width: 100%;
}

.item {
    position: relative;
}