使用JavaScript溢出幻灯片内联元素

我怎么能变成这样

在一行中，有箭头移动到其他未显示的部分，如下所示

而且可以使用鼠标或触摸滑动，我找不到任何使用CSS和JavaScript甚至JQuery的示例

某物
某物
某物
某物
某物
某物
某物
某物
某物
某物

查看Slick Slider插件：

我几乎只在我的一个项目中需要一个滑块时才使用它。简单，可定制和黑客

var left=document.getElementById（'btnLeft'）；
var right=document.getElementById（'btnRight'）；
var content=document.getElementById（'abc'）；
var outer=document.getElementById（'outer'）；
left.addEventListener（'click'，function（））{
//parseInt将“120px”返回为120，parseInt（“”）为NaN
var leftMargin=parseInt（content.style.marginLeft）；
//如果NaN使左边距为0
如果（isNaN（leftMargin））leftMargin=0；
//计算包含块外部的内部内容的滚动宽度
var widthContent=content.scrollWidth；
//计算包含块的宽度
var widthOuter=outer.getBoundingClientRect（）.width；
//当内容到达右按钮的末尾时，不允许增加左边距
如果（左边距>（宽度外部-宽度内容））{
//“20px”是指每次点击都要向左移动的内容
左边距-=20；
content.style.marginLeft=leftMargin+“px”；
}      
});
右。addEventListener（'click'，function（）{
var leftMargin=parseInt（content.style.marginLeft）；
如果（isNaN（leftMargin））leftMargin=0；
//如果内容到达左侧按钮且不应再向右移动，则不允许内容移动
如果（左边距<40）{
左边距+=20；
content.style.marginLeft=leftMargin+“px”；
}
});
#abc{
空白：nowrap；/*允许内容保留在单行中*/
边框：1px纯红；
}
.pos--左{
位置：绝对位置；
左：0px；
顶部：0px；
}
.pos--对{
位置：绝对位置；
右：0px；
顶部：0px；
}
#外{
溢出：隐藏；/*为内部内容创建窗口*/
边框：3倍纯绿；
位置：相对位置；
}

左边
有些事
什么
有些事
有些事
什么
什么
什么
什么
有些事
有些事
有些事
什么
有些事
有些事
什么事
有些事
有些事
有些事
有些事
差不多
什么事
什么事
什么事
什么事
什么事
有些事
什么
什么
赖特
我其实想知道怎么做。