Slick Slider幻灯片溢出问题答案

【问题标题】：Slick Slider slide overflow issueSlick Slider幻灯片溢出问题
【发布时间】：2017-01-26 15:53:55
【问题描述】：

我正在尝试在悬停时缩放我的幻灯片。但是如果我启用包装器的溢出，它也会在 x 轴上溢出，我只希望它垂直溢出。请看codepen：http://codepen.io/faranali9/pen/qRPXGq

HTML：

 <div class="wrapper">
  <div class="container slider">
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
    <div class="slide">
      <img src="http://www.lorempixel.com/400/200/" alt="" />
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
    </div>
  </div>
</div>

CSS：

.wrapper{
  padding:0 30px;
}

img{
  max-width:100%;
}
.slide{
  transition:all 0.3s;
  transform-origin:center;
}

.slide:hover{
  transform:scale(1.3);
}

.description{
  display:none;
}
.slide:hover .description{
  display:block;
}

JS：

$('.slider').slick(
{
  slidesToShow:5,
  arrows:true
});

【问题讨论】：

您是否尝试过在悬停事件中仅使用 transform:scaleX() 或 transform:scaleY()？

标签： css slick.js

【解决方案1】：

我认为您应该缩放img 而不是.slide。我还在.slide 中添加了一些填充以适应顶部溢出。

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

【讨论】：

谢谢，但我无法在我的场景中添加填充。我需要它长大并溢出。而且我不希望包装器在悬停时调整高度（悬停在图像上时请参阅下一个按钮）