Проблема с переполнением слайдера Slick

Я пытаюсь масштабировать слайды при наведении. Но если я включаю переполнение оболочки, она также переполняется по оси X, я только хочу, чтобы она переполнялась по вертикали. Пожалуйста, смотрите codepen: http://codepen.io/faranali9/pen/qRPXGq Проблема с переполнением слайдера Slick

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 
});

источник

2017-01-26 Faran Ali

Вы пробовали только с помощью преобразования: Scalex() или преобразование: ScaleY() на вашем мероприятии парения? – Mac

Я думаю, вы должны масштабировать img вместо .slide. Я также добавил некоторые дополнения к .slide для размещения верхнего переполнения.

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

источник

2017-01-26 16:53:33

Спасибо, но я не могу добавить прописку в моем сценарии .. Мне нужно, чтобы она развивалась и переполнялась. И я не хочу, чтобы обертка изменялась в высоту при наведении (см. Следующую кнопку вниз при наведении указателя мыши на изображение) –

Ну ладно, удачи. –

Проблема с переполнением слайдера Slick

ответ

Смежные вопросы