Horizontal scrolling slider / carousel

Question

Im working on a project page where i want a horizontal scrolling project/image slider. No matter what im 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 we bsite is a prime example of something im looking for

Answer 1

Try sharing code snippet here. From what I understand all you are trying to achieve is a simple horizontal scroll

try this

 .parent { max-width: 100%; overflow: auto; white-space: nowrap; }.parent img { margin-right: 20px }

 <div class='parent'> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /> <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /></div>

or you can use utilities in tailwind

https://tailwindcss.com/docs/overflow#scroll-horizontally-always

Answer 2

You should be able to achieve what you want if you are using Tailwind by giving the element you are working on a class of overflow-y-auto, like so:

<div class="overflow-y-auto"></div>

Answer 3

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');
  }
}));