【问题标题】：JS slider. Sliding in the direction of the pressed arrowJS 滑块。向按下箭头的方向滑动
【发布时间】：2021-11-25 22:02:31
【问题描述】：

背景故事： 我想为我的网站制作一个滑块，所以我制作了另一个“子页面”，只是为了让事情更容易解决（它只是一个原型，所以 CSS 只是基本样式 - 如果用户点击箭头，幻灯片就会滑动朝那个方向，例如，如果用户按下右箭头，幻灯片将滑到右侧。从 JS 部分来看，这似乎是一件容易的事（我什至为它编写了代码（未在提供的代码中使用） )，但问题来了。

问题描述：我需要另外两个类（我将它们命名为 .slideLeft 和 .slideRight） - 一个将 trasnslateX 设置为-100% 和第二个将其设置为 100%（也许可以在没有课程的情况下完成，但我想隔离问题）。
因此，我从.slide（基类）中提取了一些代码到.slideLeft，并将其添加到HTML（就像我对.slide 所做的那样）只是为了确保它有效。但事实并非如此。

问题来了——为什么？它在 .slide 类中工作得非常好，但是当我将它分离到另一个类时，它会使整个滑块出现故障。

注意：

我包含了工作代码。 CSS 中被注释掉的东西会使滑块中断。
此外，滑块可能看起来无法正常工作并且不稳定 - 那是因为我减少了 translateX 值仅 -50%（否则取消注释后的幻灯片将不可见）。

代码：

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%);
    } */

【问题讨论】：

标签： javascript html css slider

【解决方案1】：

只需将您的 CSS .slideLeft 和 .slideRight 放在 .active 之前。

因为你从 .active 选择器覆盖了 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%);
 } 
 .active{
        opacity: 1;
        z-index: -10;
        visibility: visible;
        transform: translateX(0);
 }

【讨论】：