Как сделать parallax через parallax.js для СЛАЙДЕРА?

Question

Kryptonit @Kryptonit

JavaScript

Как сделать parallax через parallax.js для СЛАЙДЕРА?

Здравствуйте, такая проблема: сделал слайдер, хочу задать параллакс эффект при плавной прокрутке, над картинками будет текст, попробовал подставить через parallax.js, там картинка просто статично стоит на месте, в интернете возможно плохо искал, но особо годного не нашёл, готовые решения с кучей онлайн-подключаемых библиотек ставить не хочу, пропускная способность сервера слабая, чревато долгой прогрузкой. Насколько понимаю самый простой способ - подставить parallax.js, если кто сталкивался или знает как решить, прошу помочь, заранее спасибо.
Вот код(нужно подставить картинки):

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section id="slider_section">
        <div class="line_pictures">
            <div class="picture_slider pic1">
                <img src="./img_slider_one.jpg" class="slider_img" alt="">
            </div>
            <div class="picture_slider pic2">
                <img src="./img_slider_two.jpg" class="slider_img" alt="">
            </div>
            <div class="picture_slider pic3">
                <img src="./img_slider_three.jpg" class="slider_img" alt="">
            </div>
        </div>
        <div class="slider_buttons">
            <div class="left_slider_button button"></div>
            <div class="right_slider_button button"></div>
        </div>
        <div class="slider_circles">
            <div class="circle circle1">
                <div class="in_circle in_circle1"></div>
            </div>
            <div class="circle circle2">
                <div class="in_circle in_circle2"></div>
            </div>
            <div class="circle circle3">
                <div class="in_circle in_circle3"></div>
            </div>

        </div>
    </section>
<script src="./script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./parallax.min.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
#slider_section{
    position: relative;
    display: flex;
    width: 900px;
    height: auto;
    overflow: hidden;
}
.line_pictures{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 300%;
    left: 0%;
    transition: all .8s ease;
}
.slider_img{
    width: 900px;
    height: 600px;
}
.slider_buttons{
    user-select: none;
    z-index: 5;
    cursor: pointer;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.left_slider_button, .right_slider_button{
    width: 50%;
    height: 100%;
}
.slider_circles{
    user-select: none;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    z-index: 10;
    width: 75px;
    height: 20px;
    justify-content: space-between;
}
.circle{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: none;
    border: 2px solid white;
    border-radius: 50%;
}

.in_circle{
    opacity: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    transition: all .2s ease;
}
.in_circle:hover{
    opacity: 60% !important;
}
.in_circle1{
    opacity: 1;
}
.parallax-window {
    min-height: 400px;
    background: transparent;
}

JS

document.addEventListener('DOMContentLoaded', ()=>{
    const circles_conteiner = document.querySelector('.slider_circles')
    const circles = document.querySelectorAll('.circle')
    const incircles = document.querySelectorAll('.in_circle')
    const buttons = document.querySelector('.slider_buttons')
    const button = document.querySelectorAll('.button')
    const sliderline = document.querySelector('.line_pictures')
    let currentslide = 0

    function showslide(slide){
        sliderline.style.left = `-${slide*100}%`
    }
    function cross_point(slide){
        incircles.forEach(item =>{
            item.style.opacity = '0'
        })
        incircles[slide].style.opacity = '1'
    }

    circles_conteiner.addEventListener('click', (event)=>{
        for(let i = 0; i < circles.length; i++){
            if (event.target == circles[i] || event.target == incircles[i]){
                cross_point(i)
                showslide(i)
            }
        }
    })

    console.log(currentslide);
    buttons.addEventListener('click', (event)=>{
            if (event.target == button[0]){
                if (currentslide == 0){
                    currentslide = 2
                }
                else{
                    currentslide = currentslide - 1
                }
            }
            if (event.target == button[1]){
                if(currentslide == 2){
                    currentslide = 0
                }
                else{
                    currentslide = currentslide + 1
                }
            }
            showslide(currentslide)
            cross_point(currentslide)
            
    })
    
})