javascript - 窗口调整大小时按钮跟不上 slider

Question

每当我调整窗口大小时， slider 按钮(下一个/上一个)就会消失并且不会随 slider 移动。关于如何解决这个问题的任何想法？JSFIDDLE:https://jsfiddle.net/b31kvqwr/

按钮 CSS:

#nav img {
    position: absolute;
    top: -10px;
    cursor:pointer;
    color:grey;
    width:40px;
    height:30px;



}
#prev {
    margin-left: 530px;
    font-size: 10px;

}
#next {
    right: -30px;
    margin-top: 13px;

}

PS:如果 jsfiddle 中的结果没有显示，请展开结果选项卡。

这是全屏时 slider 的样子(正确的方式)；

当我水平调整浏览器大小时会发生什么:

按钮不随 slider 移动。有什么帮助吗？

Answer 1

目前的问题是您正在使用 margin-left:530px;，这意味着无论屏幕大小如何，箭头始终位于距屏幕左侧 530px 的位置。它也看起来像曾经包裹它的东西有一个设定的宽度并且没有调整大小，你的代码对我来说太困惑了，但我发现有一些东西可以使问题变得更好，

https://jsfiddle.net/b31kvqwr/2/

我已经设法将它保持在正确的位置，但是为了让它完美地工作，你需要创建 1-2 个 @media 查询来推特不同大小的对齐方式使其完美。

我这样做的方法是将 margin-left 更改为 position:absolute 并在 prev 和 next 上使用 left 定位按钮；

#prev {
    left: 50%;
    font-size: 10px;
    position:absolute;  
}
#next {
    margin-top: 13px;
    left:58%;
    position:absolute;
}

正如我附注的那样，我建议像@TingGaint 所说的那样清理您的代码，因为它非常困惑。此外，在堆栈上发布时，请尝试只包含相关代码而不是全部代码，因为这样可以更快、更轻松地查看和提供帮助。

编辑

我发现了问题，仍然按照我上面说的做，但是现在不是让箭头 div 在它们现在所在的位置，而是将它们移出并放在 <div id="wrapper"> 下面但是，您将不得不尝试放置，因为它们将位于屏幕顶部。然而，现在它们在调整大小时留在同一个地方!

示例 - https://jsfiddle.net/b31kvqwr/4/