JS 滑块。沿按下的箭头方向滑动

Question

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

问题描述： 我需要它才能工作 2 个额外的 classes（我将它们命名为 .slideLeft 和 .slideRight) - 一个将 trasnslateX 设置为 -100%，第二个将其设置为 100%（也许可以在没有 classes 的情况下完成，但我想找出问题）。
因此，我从 .slide（base class）中提取了一些代码到 .slideLeft 并将其添加到 HTML（就像我对 .slide 所做的一样）只是为了确保它有效。但事实并非如此。

问题来了 - 为什么？它在 .slide class 中运行得非常好，但是当我将它与另一个 class 分开时，它会导致整个滑块出现故障。

注意：

我包含了工作代码。 CSS 中被注释掉的内容会使滑块损坏。
此外，滑块可能看起来无法正常工作并且不稳定 - 那是因为我 reduced 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%);
    } */

Answer 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);
 }

JS 滑块。沿按下的箭头方向滑动

JS slider. Sliding in the direction of the pressed arrow

html

javascript

css

slider

注意：

代码：