CSS for slider left to right?

Question

I have a slider that is moving from right to left but now I want to change it to move from left to right. These are my JS and HTML codes, which changes should I make in my CSS codes? HTML codes need to be better to load and functions have been explained as well. in JS codes there are some variables and at last, there are the main functions.

I'll be appreciated it if give me hint or help Thank you.

            <div class="f-slider-btnz">
                <span  class="f-slider-btn-right" onclick="move_f_Slider(&apos;right&apos;)">
                    <i class="fa fa-chevron-right"></i>
                </span>
                <span class="f-slider-btn-left canmove" onclick="move_f_Slider(&apos;left&apos;)">
                    <i class="fa fa-chevron-left"></i>
                </span>
            </div>

            <div class="f-slider-btnz-circle">
                <i class="fa fa-chevron-right" onclick="move_f_Slider(&apos;right&apos;)"></i>
                <div class="f-slider-btnz-circle-list">
                    <span class="f-slider-circle-item active"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                    <span class="f-slider-circle-item"></span>
                </div>
                <i class="fa fa-chevron-left" onclick="move_f_Slider(&apos;left&apos;)"></i>
            </div>

        </div>

        %featureSliderz-endonscroll%
    </div>
</div>

function move_f_Slider(direction) {

let all_sliderz = document.querySelectorAll("#feature-sliders .f-slider .f-slider-item")

let one_slide = document.querySelector("#feature-sliders .f-slider .f-slider-item")

let movement = one_slide.clientWidth;
let calc_move = 0;

let max_move = (movement * all_sliderz.length) - movement;


let right_btn = document.querySelector("#feature-sliders .f-slider-btnz .f-slider-btn-right")
let left_btn = document.querySelector("#feature-sliders .f-slider-btnz .f-slider-btn-left")


if (direction === "left") {
    for (let c = 0; c < all_sliderz.length; c++) {
        if (all_sliderz[c].style.right && (all_sliderz[c].style.right !== null || all_sliderz[c].style.right !== "0px" || all_sliderz[c].style.right !== "")) {
          
            calc_move = all_sliderz[c].style.right.replace("px", "");
            
            if (max_move > parseInt(calc_move)) {
                calc_move = parseInt(calc_move) + movement;
                right_btn.classList.add("canmove");
            } else {
               
                left_btn.classList.remove("canmove");
                enableScroll();
                SliderEventTrigger = true;
            }
        } else {
            right_btn.classList.add("canmove");
            
            calc_move = movement;
        }
        
        all_sliderz[c].style.right = calc_move + "px";
    }
    let quantity = calc_move / movement;
    set_f_slider_small_btn(quantity);
}
else {
    for (let c = all_sliderz.length - 1; c >= 0; c--) {
        calc_move = all_sliderz[c].style.right.replace("px", "");
        if (parseInt(calc_move) >= Math.round(movement)) {
            calc_move = parseInt(calc_move) - movement;
            left_btn.classList.add("canmove");
        } else {
            
            right_btn.classList.remove("canmove");
        }
        all_sliderz[c].style.right = calc_move + "px";
    }
    let quantity = calc_move / movement;
    set_f_slider_small_btn(quantity);
}

}

Answer 1

I found the answer, each slider has the right style and it needs to take the left style in CSS equals 0. and in JS codes functions conditions are focused on right but it needs to focus on the left to decrease the value by moving or changing the slides in following JS codes and variables. eventually, directions were important, too, to be ltr.