Javascript 鼠标拖动后仅显示3个缩略图时出现问题

我有一个缩略图库，一个一次只显示3个缩略图的div，用户可以用鼠标向左或向右拖动来显示更多缩略图

当前小提琴：

我想要达到的目标： -所有6个框对齐一行，但只显示左3个。如果在div之外，则将隐藏右侧的3 -当我将长方体从div中拖出时，长方体将被隐藏

<div class="container">
    <div class="image_holder">
        <div class="drag">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>
</div>

我有一些问题，我不想使用插件。有人能给我指路吗

---

我正在尝试这样做，你可以看到它包含5个缩略图，我想做的是在一行中超过10个缩略图，但只有5个可见，用户可以通过鼠标拖动幻灯片来查看其他缩略图。

首先，你需要做的是在其中添加以下样式。图像\u

overflow : hidden;

溢出决定的是当盒子里的内容溢出时，它应该如何反应。使用hidden，我们决定将内容隐藏在盒子内

代码中的问题：

现在，您已经将.image_holder的宽度指定为300px，当其内部元素的累积宽度大于其自身的宽度时，它们将分解到左下角

解决方案：

因此，要使所有这些元素在溢出.image_保持架时隐藏，您必须保留另一个div，该div保持所有元素的高宽度范围。幸运的是你有一个div，就是.drag。只需给它一个更大的宽度

.drag{
    width : 1000px;
}

现在，这个.drag div将在.image\u支架内流动，由于它的宽度是一个大值，所有元素都将在一行中，它们也将在.image\u支架div内流动，正如您所期望的那样

这是一把小提琴：

参考资料：

---

正是我需要的！谢谢@ashad shantobtw，你知道如何限制第一个和最后一个元素可以拖动的间隙吗？至于现在，我可以一直拖动，使所有的元素都消失，没有限制，我想要的是，如果你向右拖动，最左边的元素不能离开它的父元素超过30px，同样，如果我向左拖动，最后一个元素不能超过右父元素的30px。谢谢