用于多个项目的水平滚动条，用于在下一个/上一个按钮中导航

Question

我需要为我的300 div添加一个水平滑块，并且可以扩展。但是，有第三方滑块，react-slick，但我不能使用它因为CSS和其他冲突，而且，我的大四学生不愿意使用它。

实际上，我希望此链接中的不均匀集（无限）具有相同的功能：react-slick examples。我以前的代码用于垂直滑块：

<div className="md-grid" style={{ maxHeight: '300px', overflowY: 'scroll', width: '100%' }}>

    <div className="md-cell md-cell--3">asd</div>
    <div className="md-cell md-cell--3">dsad</div>
    <div className="md-cell md-cell--3">dsa</div>
    <div className="md-cell md-cell--3">asd</div>
    <div className="md-cell md-cell--3">asddf</div>
    <div className="md-cell md-cell--3">dsf</div>
    <div className="md-cell md-cell--3">dsfsdf</div>
    <div className="md-cell md-cell--3">sdfsf</div>
    <div className="md-cell md-cell--3">sdf</div>
    <div className="md-cell md-cell--3">ewr</div>
    <div className="md-cell md-cell--3">asd</div>
    <div className="md-cell md-cell--3">jhg</div>
    ....... 
    .......
</div>

我想在下图中看到这样的结果（考虑多个项目或div）：

这是创建一个垂直滚动条但这不是我要找的。实际上，我正在使用react-md（react-md）并且它没有这种类型的轮播。

因为，我正在使用react，我不能使用jQuery。我被卡住了。

由于