如何在屏幕上显示上一个和下一个滑块的一半Bootstrap 4

Question

最近，我发现了一个具有挑战性的PSD设计，因此为了练习，我想使用PSD to HTML来转换此Bootstrap 4，但遇到问题，需要在屏幕上显示上一个和下一个滑块一半，如下所示图片。

https://codepen.io/anon/pen/orKWjB

我在Bootstrap carousel multiple frames at once答案的帮助下编写了此代码，但在此答案中没有我需要的功能，因此我在图像上添加了margin-left（第33行），因此它可以翻译左侧，但以响应方式，我不知道如何解决该问题，因为我不想在每个断点处添加vw，这看起来很糟糕。

https://nisharg.me/travel（类别部分）是实时示例，在该示例中，我使用了许多媒体查询来获得相同的结果，但我不想那样做，我需要真正的解决方案！！

不想使用slick.js或OWL carousel

任何解决方案吗？