Horizontal scrolling slider / carousel

I'm working on a project page where I want a horizontal scrolling project/image slider. No matter what I'm trying I can't seem to make it work.

This is the design, where the projects would need to slide based on mouse wheel scroll down.

Design of what I want to achieve:

I work with tailwind and HTML / JavaScript.

If anyone knows a solution that would be very much appreciated.

The homepage slider on this website is a prime example of something I'm looking for.

This is a demo I created for you. Demo

You can use slick.js to achieve your goal easily, the slick slider doesn't have a scroll wheel control function by default, but you can build one using the snippet below.

$("my_slider").on('wheel', (function(e) {
  e.preventDefault();
  if (e.originalEvent.deltaY < 0) {
    $(this).slick('slickNext');
  } else {
    $(this).slick('slickPrev');
  }
}));