I want to create a div inside of which there are links (a tags) formatted as buttons in inline(flex-row) display, the container div has a specified width and the width of the links inside it should be auto (based on the content inside it). I want that, if number of links is such that the total width of all links exceeds the container width, next and previous buttons should appear and they would be used to kinda "scroll" and move to next child elements, just like a carousel. I have tried libraries such as Swiper.js and owl carousel, but the problem was that these libraries ask for "slidesPerView" which decides the width of child elements and all of them take same width. Suggest me libraries which can serve the purpose or core js code if libraries don't work.
<div class="container">
<a href="#" class="child w-auto py-2 px-3">Something</a>
<a href="#" class="child w-auto py-2 px-3">Something Else</a>
<a href="#" class="child w-auto py-2 px-3">And Something Else</a>
<a href="#" class="child w-auto py-2 px-3">Something short</a>
</div>
I want something like :This
