Question

我正在尝试在悬停时缩放幻灯片。但是如果我启用了包装器的溢出，它也会在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
});

Answer 1

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

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

Slick Slider幻灯片溢出问题

1 个答案: