Как можно убрать «overflow:hidden» по вертикали у слайдера?

Question

[parnasmi]

Всем привет! Верстаю адаптивный шаблон интернет магазина. Вот ссылка на страницу где проблема. Внизу есть слайдер карточек товаров с заголовком "Покупатели, которые приобрели Велосипед двухподвесный Giant Anthem Advanced 27.5 1 (2016), также купили". Слайдер реализован на slick-slider. Как и все слайдеры на контейнер задан свойства overflow:hidden. Из-за это у карточек товаров обрезается 2-я ряд иконок который появляется снизу при наведение на карточку. Кроме того обрезается и tooltip который виден при наведение на иконок. Возможно ли каким-то способом убрать overflow:hidden только по оси Y? Внизу есть еще один слайдер с заголовкой "Похожие товары". Там я убрал свойство overflow:hidden. Если взять только по вертикали, именно так должно все выглядеть. Заранее спасибо за любые помощи и наводок.

Comments

[Kovalsky]

Чтобы убрать, надо убрать. C ".also-buyed__carousel-wrap .slick-list", например

Answer 1

[Сергей delphinpro]

Я вижу только один вариант - писать много js =)
Т.е. ловим событие наведения мышки, генерируем блок за пределами слайдера наполняем соответствующим контентом из наведенной карточки, высчитываем и позиционируем поверх карточки. Не забываем каждый раз инициализировать и дестроить плагины/скрипты/события, которые работают внутри наведенной плашки.

Comments

[parnasmi]

Спасибо. Но, Неужели нет другого способа? В js я не силен. Но даже так если все так и реализовать насколько это будеть хорошим и универсальным решением?

[Максим]

parnasmi: ваш слайдер:ховер{оверфлоу:ауто;} не работает ??

[parnasmi]

. Shadow: Работает, но по горизотали видны все карточки товаров. Если у пользователья разрешения экаран большая смотриться к сожелению не красиво.

[Максим]

parnasmi: ну тогда не оверфлоу , а overflow-x :hidden; overflow-y:auto; проверьте

[Сергей delphinpro]

parnasmi: как реализуете, таким и будет.
overflow-x, -y не поможет

[parnasmi]

. Shadow: Не помогло. Но, в целом ваш совет сработал. Огромное спасибо! Только в добавок, я в стилях всем карточкам товаров задал свойства "opacity:0", а 4 карточкам которые видны все время "opacity: 1". Вроде теперь все нормально. Только теперь смущает, тот факт, что tooltip ы иконок верхнего слайдера уходить за контент карточек нижележащего слайдера. Вот так: piccy.info/view3/10624409/dc8e4fd1442a10974d7b64dc...
И еще можно посмотреть вживую. Страницу обновил.
Как можно это побороть? Спасибо.

[parnasmi]

Сергей: Сергей, спасибо. Вы прав. Но по наводку .Shadow вроде удалось выкрутиться. Предлагаемый вами метод тоже интересен. Когда прокачаю свою js скиллы, попробую эту реализовать.

[Сергей delphinpro]

parnasmi: Добавьте еще вместе с opacity:0 свойство pointer-events: none; а то там мышка реагирует на невидимые элементы.

[parnasmi]

Сергей: Сергей, спасибо! Сделал.

Answer 2

[auddit]

Как вариант - можно сделать так:

.slick-list {
overflow: visible!important;
}
.slick-slide {
opacity: 0;
transition: opacity 500ms;
}
.slick-slide.slick-active {
opacity: 1;
}

Answer 3

[Felicia Mad]

Можно воспользоваться подобной библиотекой github.hubspot.com/drop