Bootstrap 4动态水平微调器

Question

我想用jquery 1.9.1和bootstrap 4.1.1创建无限水平旋转器。您可以在图像中看到我的意思是微调器的示例：

但是我希望微调器是水平的并且是“通用的”，因此它可以包含具有任何内容（长文本或图像）的DIV。我经历了很多stackoverflow问题，但运气不佳。

我目前的状态是我的行在超过12个列之后不会中断，但是一旦使用“ overflow：hidden;”，我将无法滚动它。 CSS属性（我不希望滚动条可见...）。

所以，我的问题是，隐藏溢出时如何使div可滚动？ 如何使div为“无限”，到达终点时我是否必须以编程方式附加新内容，以使其感觉像是无限的？ 我可以为此使用引导程序，还是“手动”定义宽度和高度更好？ 还没有准备好一些不错的组件吗？我所发现的一切看起来就像是十年或两年前写的。

编辑：我的代码：

<!--This is how I have defined container for the spinners (two of them below each other)-->
<div id="proto_scroll_question_answer" class="proto scroll-question-answer container-fluid">
    <div id="aswer-key-row" class="row scroll flex-row flex-nowrap"><button class="btn btn-primary btn-scroll-left">LEFT</button><button class="btn btn-primary btn-scroll-right">RIGHT</button></div>
    <div id="aswer-value-row" class="row scroll flex-row flex-nowrap"><button class="btn btn-primary btn-scroll-left">LEFT</button><button class="btn btn-primary btn-scroll-right">RIGHT</button></div>
</div>

我正在动态构建内容，因此我根据输入的一些数据来获取此元素^^并将其克隆...

var scroll_div = $("#proto_scroll_question_answer").clone();    
scroll_div.removeAttr("id");
scroll_div.removeClass("proto");

var answer_key = $("#aswer-key-row", scroll_div);
var answer_value = $("#aswer-value-row", scroll_div);

var keyButtons = [];
var valButtons = [];
for (var i = 0; i < questionObject.responses.length; i++) {
    var keyValue = Object.getOwnPropertyNames(questionObject.responses[i])[0];

    $(answer_key, scroll_div).append($('<div class="col-10"><button type="button" class="btn btn-primary btn-assign assign-key" value="' + i + '">' + keyValue + '</button></div>'));
    $(answer_value, scroll_div).append($('<div class="col-10"><button type="button" class="btn btn-primary btn-assign assign-value" value="' + i + '">' + questionObject.responses[i][Object.getOwnPropertyNames(questionObject.responses[i])[0]] + '</button></div>'));
}
$(".question-answer", proto).append(scroll_div);
return proto;

这将生成两行长长的按钮。如何使它们“旋转”？而且主要是

$(".btn-scroll-right").hover(function (event) {
    var scroll_row = $($(event.target).parent());
    scroll_row.animate({
        scrollLeft: scroll_row.offset().left
    }, 'slow');
});

仅当我保留不希望显示的滚动条时才起作用。如果我至少可以以编程方式移动“不可见”的滚动条，我会以某种方式处理它。