Question

我正在尝试为我的网站制作一种交互式幻灯片，并在其开发过程中遇到一些死机。对它的任何指导或帮助都会很棒。我遇到的问题是让它变得敏感。

以下是我的目的：http://adobe.ly/1sRBMLv

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

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

到目前为止，我只有基本的html和css结构，但不是函数。任何帮助都会很棒。

Answer 1

我在@Serlite的帮助下找到了解决方案，指出了我正确的方向。我现在把它视为幻灯片。这是工作的小提琴：

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%; }

在没有javascript的情况下滑动，隐藏和浏览div

1 个答案: