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

CodePudding user response：

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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

or you can use utilities in tailwind

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

CodePudding user response：

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>