horizon parallax, particle

new Swiper(".slider", {
    //direction:"vertical",
    speed:2000,
    mousewheel: {
        enabled:true,
        sensitivity:2.4,
    },
    spaceBetween: 18,
    parallax:true,  
    //freeMode:true
})

:root{
    --transition:1.5s cubic-bezier(0.2, 0.6, 0, 1) ;
}
.slider {height: 100%;}
.slider__layer{position: absolute; 
    /* transition: var(--transition) !important; */
     inset:0; background-size: cover;will-change:transform; background-position: center;}
.slider__layer::before {content: ''; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 250px #000;}
.slider__item{overflow: hidden;}
.slder__wrapper{will-change:transform; transform-style: preserve-3d;}

<link rel="stylesheet" href="horizon/libs/swiper/swiper-bundle.min.css">

<div class="swiper slider">
    <div class="swiper-wrapper slder__wrapper">

        <div class="swiper-slide slider__item">
            <div class="slider__layer" data-swiper-parallax="35%" style="background-image: url(horizon/img/screen-1/layer-back.jpg);"></div>
            <div class="slider__layer" data-swiper-parallax="25%" style="background-image: url(horizon/img/screen-1/layer-middle.png);"></div>
            <canvas class="particles slider__layer" data-swiper-parallax="20%" data-color="#b99970"></canvas>
            <div class="slider__layer" data-swiper-parallax="14%" style="background-image: url(horizon/img/screen-1/layer-front.png);"></div>
        </div>

        <div class="swiper-slide slider__item">
            <div class="slider__layer" data-swiper-parallax="35%" style="background-image: url(horizon/img/screen-2/layer-back.jpg);"></div>
            <div class="slider__layer" data-swiper-parallax="25%" style="background-image: url(horizon/img/screen-2/layer-gera.png);"></div>
            <div class="slider__layer" data-swiper-parallax="14%" style="background-image: url(horizon/img/screen-2/layer-front.png);"></div>
        </div>

        <div class="swiper-slide slider__item">
            <div class="slider__layer" style="background-image: url(horizon/img/screen-1/layer-back.jpg);"></div>
            <div class="slider__layer" style="background-image: url(horizon/img/screen-1/layer-middle.png);"></div>
            <div class="slider__layer" style="background-image: url(horizon/img/screen-1/layer-front.png);"></div>
        </div>

    </div>
</div>


<script src="horizon/libs/swiper/swiper-bundle.min.js"></script>
<script src="horizon/libs/particles/particles.js"></script>