html - 在没有 javascript 的情况下滑动、隐藏和导航 div

Question

我正在尝试为我的网站制作一种交互式幻灯片，但在其开发过程中遇到了一些死胡同。任何方向或帮助都会很棒。我遇到的问题是让它响应。

这是我想要的:http://adobe.ly/1sRBMLv

我最初是通过在 800 像素宽的可见部分中的 4000 像素宽的 div 上使用 overflow:hidden; 来创建它的。然后链接只是重新定位 div 以显示 5 个不同的 800px 宽部分中的 1 个。这个想法最终需要被废弃，因为它没有响应。

这是我的 jsfiddle:https://jsfiddle.net/dodgrdg3/1/

到目前为止，我只有基本的 html 和 css 结构，但还没有功能。任何帮助都会很棒。

Answer 1

我在@Serlite 的帮助下找到了解决方案，为我指明了正确的方向。我现在将其视为幻灯片。这是它工作的 fiddle :

Working Example

我的一个改变正在改变......

这个:

#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }

成为:

#a1:target .pages { left: 0%; }
#a2:target .pages { left: -100%; }
#a3:target .pages { left: -200%; }