Backstory: I wanted to make a slider for my website, so I made another "subpage" just to make things easier to work out (it's just a prototype, so CSS is just the basic styling - if the user clicks the arrow, a slide will slide in that direction, so e.g. if the user pressed the right arrow, the slide will slide off to the right side. From the JS part, it seems like an easy task (I even wrote code for it (not used in the provided code)), but there comes the problem.

Problem description: I need for that to work 2 additional classes (I named them .slideLeft and .slideRight) - one that sets the trasnslateX to -100% and the second one that sets it to 100% (maybe it can be done without classes, but I want to isolate the problem).
Therefore I extracted some of the code from the .slide (base class) to .slideLeft and added it to HTML (just like I did with a .slide) just to make sure it works. But it doesn't.

And here comes the question - why? It works perfectly fine in the .slide class, but when I separate it to another class, it glitches out the whole slider.

CAUTION :

I included the working code. The things in CSS that are commented out make the slider break.
Also, the slider may seem like not working properly and being choppy - that's because I reduced translateX value to just -50% (otherwise after uncommenting slides wouldn't be visible).

CODE:

CODEPEN


<!DOCTYPE html>
<html lang="en">
<head>
    <title>slider</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div class="center">
            <div id="slider">
                <span class="sButton" onclick="NextPrevButton(-1)"> &#10094;</span>
                <div class="slide slideLeft" id="s1" > PERFECT </div> <!-- two classes here -->
                <div class="slide slideLeft" id="s2" > FLAWLESS </div> <!-- two classes here -->
                <div class="slide slideLeft" id="s3" > GORGEOUS </div> <!-- two classes here -->
                <div class="slide slideLeft" id="s4" > SLIDER </div> <!-- two classes here -->
                <span class="sButton" onclick="NextPrevButton(1)"> &#10095;</span>
            </div>
            <div id="buttons">
                <span class="sDot" onclick="chooseSlide(0)"></span>
                <span class="sDot" onclick="chooseSlide(1)"></span>
                <span class="sDot" onclick="chooseSlide(2)"></span>
                <span class="sDot" onclick="chooseSlide(3)"></span>
            </div>
        </div>
    </div>
</body>
</html>



.slide {
    opacity: 1;
    visibility: hidden;
    display: none;
    /* uncommenting .slideLeft (activated in html) screws up the slider, 
       despite being exact same thing as in that class */
    transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
    transform: translateX(-50%); /* translating only 50% just to show the error, destinated value is -100% */
}
    .active{
        opacity: 1;
        z-index: -10;
        visibility: visible;
        transform: translateX(0);
    }
    /* .slideLeft{
        transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
        transform: translateX(-50%);
    }
    .slideRight{
        transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
        transform: translateX(50%);
    } */

CodePudding user response：

Just place your css .slideLeft and .slideRight before .active.

it is broken because you override transform: translateX(0) from .active selector


 .slideLeft{
        transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
        transform: translateX(-50%);
 }
 .slideRight{
        transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
        transform: translateX(50%);
 } 
 .active{
        opacity: 1;
        z-index: -10;
        visibility: visible;
        transform: translateX(0);
 }