Css 用于缩略图的水平div

我想做一个水平div，用按钮“上一个”和“下一个”显示多个缩略图。 这些按钮将用于滚动div

有人能告诉我怎么做吗

我希望缩略图如图所示：

我的缩略图代码：

。组合箭头{
位置：绝对位置；
宽度：50px；
高度：50px；
文本对齐：居中；
右：0；
}
.portfolio箭头。左、.portfolio箭头。右{
宽度：35px；
高度：25px；
背景色：红色；
边缘底部：2px；
光标：指针；
}
.组合箭头.左i..组合箭头.右i{
垂直对齐：中间对齐；
颜色：灰色；
}
.拇指{
位置：相对位置；
宽度：100%；
高度：200px；
}
.portfolio拇指。拇指列表{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit转换：-webkit转换0.4s；
-moz变换：-moz变换0.4s；
转变：转变0.4s；
}
.portfolio thumbs.thumbs列表ul{
列表样式：无；
填充：0；
}
.portfolio拇指。拇指列表ul li{
宽度：200px；
高度：200px；
显示：内联块；
}

以前的
下一个

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,

。组合箭头{
位置：绝对位置；
宽度：50px；
高度：50px；
文本对齐：居中；
右：0；
}
.portfolio箭头。左、.portfolio箭头。右{
宽度：35px；
高度：25px；
背景色：红色；
边缘底部：2px；
光标：指针；
}
.组合箭头.左i..组合箭头.右i{
垂直对齐：中间对齐；
颜色：灰色；
}
.拇指{
位置：相对位置；
溢出：隐藏；
高度：200px；
}
.portfolio拇指。拇指列表{
位置：绝对位置；
-webkit转换：-webkit转换0.4s；
-moz变换：-moz变换0.4s；
转变：转变0.4s；
列表样式：无；
空白：nowrap；
填充：0；
}
.投资组合大拇指.大拇指列表李{
宽度：200px；
高度：200px；
显示：内联块；
}

以前的
下一个

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,

用户3242861

我有一个建议给你

如果你想做得更快， 您可以使用它来解决问题。 这是制作简单幻灯片的库

它很容易使用

示例：

$（“#幻灯片”）。光滑({
无限：是的，
幻灯片放映：5，
幻灯片滚动：5
});
正文{
背景：#ccc；
}
.盒子{
背景：#fafafa；
文本对齐：居中；
利润率：10px；
高度：200px；
}

S1
S2
S3
S4
S5
中六
S7
S8
S9
S10
谢谢。我怎样才能让按钮左右滚动200px@欢迎你。这可以使用一些JavaScript来完成。对于JavaScript部分，最好再问一个问题