CODEWITHSUNDEEP
cssslick.js
Faran Ali
Faran Ali

Reputation: 482

Slick Slider slide overflow issue

I am trying to scale my slides on hover. But if i enable the overflow of the wrapper, it overflows in x-axis as well, i only want it to overflow vertically. Please see the 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
});

Upvotes: 1

Views: 5677

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

I think you should be scaling the img instead of the .slide. I also added some padding to the .slide to accommodate the top overflow.

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

Upvotes: 0

Related Questions