css中，点击切换内容如何实现

Question

在www.jd.id中，有以下楼层

]

可以点击左右侧的按钮切换内容，这种怎么实现？

Answer 1

两个绝对定位。
外部uloverflow：hidden.
切换内容就是移动内部ul的left或right值。

Answer 2

百度一下swiper，强大的触摸滑动组件，可以坐幻灯片、商品切换等许多特效，具体实现参考官方文档

Answer 3

有你想要的 演示 文档

Answer 4

好久没写过了，实现思路就跟你拿着一个框放在一张长卷轴上。
首先先让框和卷轴等高，后续操作就是拉扯卷轴往左往右移动，每一次拉动固定长度。
PS：无限循环的思路可以将卷轴想成为可拼接的。
详细实现实在是多，有空的话写一篇文章会比较好吧。
纯CSS的话就不能点击移动了，如果靠CSS实现的话只能是自动轮播并通过CSS动画实现了。
想想还是很有趣的。

根本思路其实就是下面这样（瞎写的）：

// 框
<div style="position: relative;display:inline-block;width: 300px;height:100px;overflow:hidden">
    // 卷轴
    <ul style="position: absolute;display:inline-block;width: 3000px;height: 100px;">
        ...
    </ul>
</div>