Как реализовать наложение слайдов друг на друга, так чтоб первый слайд не уезжал, а было как картотека?

Question

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Your Lab</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap&_v=20231006164048" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/libs.min.css?_v=20231006164048">
    <link rel="stylesheet" type="text/css" href="css/main.min.css?_v=20231006164048">
</head>

<body>
    <div class="wrapper">

        <main class="main service-page">
     
<div class="workflow">
    <div class="container">
        <div data-slick>
            <div class="workflow__wrap flex-wrap">
                <div class="workflow__left">
                    <div class="workflow__number">01</div>
                    <div class="heading-h3">You leave a request on the site and we will contact you</div>
                    <div class="workflow__text">You leave a request on the site and we will contact you</div>
                </div>

                <div class="workflow__right">
                    <div class="workflow__img">
                        <img src="img/home/workflow.svg" alt="">
                    </div>
                </div>
            </div>

            <div class="workflow__wrap flex-wrap" style="background: #ced2d5;">
                <div class="workflow__left">
                    <div class="workflow__number">02</div>
                    <div class="heading-h3">You leave a request on the site and we will contact you</div>
                    <div class="workflow__text">You leave a request on the site and we will contact you</div>
                </div>

                <div class="workflow__right">
                    <div class="workflow__img">
                        <img src="img/home/workflow.svg" alt="">
                    </div>
                </div>
            </div>
            <div class="workflow__wrap flex-wrap" style="background: #94989b;">
                <div class="workflow__left">
                    <div class="workflow__number">03</div>
                    <div class="heading-h3">You leave a request on the site and we will contact you</div>
                    <div class="workflow__text">You leave a request on the site and we will contact you</div>
                </div>

                <div class="workflow__right">
                    <div class="workflow__img">
                        <img src="img/home/workflow.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
       
       

        </main>

    </div>



</body>

</html>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
    $('[data-slick]').slick({
        vertical: true,
        verticalSwiping: true,
        speed: 1000,
        arrows: false, 
        infinite: false,
        draggable: false
    });
    
    let scrolling = false;
    
    $(window).on('wheel', function(e) {
        if (!scrolling) {
            scrolling = true;
            if (e.originalEvent.deltaY > 0) {
            

$('[data-slick]').slick('slickNext');
        } else {
            $('[data-slick]').slick('slickPrev');
        }
        setTimeout(function() {
            scrolling = false;
        }, 1000);
    }
});

<style>
.workflow__number {width: 55px;height: 55px;}
[data-slick] {padding: 100px 0;}
.slick-slide {
    transition: transform 1s;
    transform: translateY(100%);
    display: flex !important;
    margin: 25px 0 0;
}

.slick-slide.slick-active {
    transform: translateY(0);
}
</style>

https://codepen.io/andrei-lepekhov/pen/qBgZzBE

вот мой код

а должно работать как на этом сайте https://swagapp.com/features-overview/

вот этот блок https://prnt.sc/_0VGHypjtzEj

БЛОГ НА HUSL

Как реализовать наложение слайдов друг на друга, так чтоб первый слайд не уезжал, а было как картотека?

Ответы (0 шт):