Как реализовать slick slider таким образом как на ссылке?

Question

[Maksim Ivanov]

как реализовать slick slider таким образом как на ссылке
https://www.leesa.com/products/leesa-mattress

Comments

[justdealman]

В чем, собственно, трудность?

[Maksim Ivanov]

justdealman: чтобы он был на весь экран при загрузки. и добавить маленькие фото

Answer 1

[Максим]

Это конечно не слик-слайдер но : www.menucool.com/slider/thumbnail-slider-demo-3

Comments

[justdealman]

Это слик слайдер.

[Максим]

justdealman: дааа ?? офигеть ... сорри но в общем устраивает ?

[Максим]

justdealman: вобще это ninja-slider

[Maksim Ivanov]

ниндзя слайдер не подходит((

[Максим]

Maksim Ivanov: через devtools посмотрите - сами увидите

Answer 2

[drtvader]

2 слика вроде можно состыковать.
asNavFor если память не изменяет.

$('.js-slick-carousel-product-for').slick({
            arrows: false,
            asNavFor: '.js-slick-carousel-product-nav',
            dots: false,
            infinite: true,
            slidesToScroll: 1,
            slidesToShow: 1,
            speed: 300
        });

        $('.js-slick-carousel-product-nav').slick({
            arrows: true,
            asNavFor: '.js-slick-carousel-product-for',
            dots: false,
            focusOnSelect: true,
            infinite: true,
            slidesToScroll: 1,
            slidesToShow: 4,
            speed: 0,
            swipe: false,
            vertical: true
        });

Comments

[Maksim Ivanov]

а чтобы на весь экран был ??

[Maksim Ivanov]

при ресайзе он остается на весь экран

[drtvader]

ну можно стилями задать.

[Maksim Ivanov]

стилями такое не сделать position fixed тут не поможет т.к нужно чтобы у блока была высота, чтобы контент под слайдером не проваллился

[justdealman]

Задавайте слайдеру фиксированную высоту, в примере именно так. Инфоблок спозиционирован абсолютно поверх слайдера.

[drtvader]

Maksim Ivanov: а зачем position? width: 100% делаешь, высоту можешь задать родительскому блоку.

[Maksim Ivanov]

наверно вы меня не поняли... откройте ссылку и вы увидете что слайдер на весь экран и как бы не менялся размер броузера по высоте и ширине он всеравно будет на весь экран. И только когда начинаешь скролить вниз он остается на месте уже и видно контент под слайдом

[Maksim Ivanov]

такого наскоко я знаю одними стилями не сделать((

[drtvader]

Maksim Ivanov: я понял, в чем проблема то? все блоки в слайдер так же добавляются. а тот блок, который не меняется вне слайдера и через position: absolute;

[Maksim Ivanov]

drtvader: проблема в том чтобы сделать его на весь экран

[Maksim Ivanov]

drtvader: можете на примере показать как такое реализовать?

[drtvader]

Maksim Ivanov: высота родительского блока 100vh

[drtvader]

Maksim Ivanov: получилось?

[Maksim Ivanov]

drtvader: да, спасибо )