Suggestions for Two Additional Thumbnail Features

What is the requested behavior?

(Sorry for tweaking the template / leaving some sections empty, hopefully that's ok!)

I was wondering if you'd accept pull requests for the following new features for thumbnail navigation in the Gallery. I'm willing to do the work, but wanted to ask for your thoughts before beginning such work.

Using "wheel" event in GalleryThumbsComponent: When the gallery is showing thumbnails horizontally, whether above or below the gallery pictures, I would like to add a wheel event listener that would apply the deltaY value of a scroll event to the scrollLeft value of slider. This would allow scrolling similar to what happens when the thumbnails are in a vertical orientation. I did a quick POC of how it could work, but the most interesting bit of the change is below:
```
registerWheelListener(): () => void {
const handler = (ev: WheelEvent) => {
  this.slider.scrollLeft += ev.deltaY;
  ev.preventDefault();
}
this.slider.addEventListener('wheel', handler);

return () => this.slider.removeEventListener('wheel', handler);
}
```
Adding GalleryThumbsNavComponent: This is a more extensive addition, but the idea is to add navigation icons to the thumbnails to allow paging through large galleries. For my use case, I may have a hundred or so pictures in a gallery and I'd like to allow users to "page" through the thumbnails. I did a very rough mockup of what I was thinking in the Lab, which is found below.

I haven't thought through all the behavior for this request, but at its simplest, I was thinking that when a user clicked the right-hand nav button, what was the rightmost picture becomes the leftmost picture and vice versa. Also, this would be a feature that a developer would have to enable, it would not be enabled by default.

What is the current behavior?

n/a

What are the steps to reproduce?

n/a

What is the use-case or motivation for changing an existing behavior?

Explained above.

Which versions are you using for the following packages?

Angular: 16.1.1 Angular CDK: 16.1.1 Angular CLI: 16.1.0 Typescript: 5.0.4 Gallery: 11.0.0

Is there anything else we should know?

n/a

The wheel already work natively since it's a scrollable layout, however, for horizontal scroll you need to press shift while scrolling. I am not sure if there is a native way to make it work without the shift.

The problem with the wheel event that it ruins the the touchpad horizontal scroll as in this example https://dev.to/juanbelieni/how-to-create-horizontal-scroll-with-mouse-wheel-using-javascript-4cm5

The way I would prefer such addition is if we make it work by applying an external directive on the gallery and avoid adding the logic inside the component itself. I would hold on until next version.

For the second feature, it is on my radar, however for this to work we have to implement a pagination feature in the gallery.

I have implemented this in another abandoned carousel plugin I never released Check the demo here and here and try to slide the thumbnails.

The galleryRef state would like:

export interface GalleryState {
  total?: number;
  perPage?: number;
  hasNextItem?: boolean;
  hasPrevItem?: boolean;
  activeItem?: number;
  activePage?: number;
  pages?: CarouselItem[];
}

For example you set perPage to 5, which means 5 items per page (slide).

You can navigate by item, or by page. I think when this is implemented we can easily add the secondary nav on thumbnails

BTW, I am releasing a beta version which I am currently working on in this branch https://github.com/MurhafSousli/ngx-gallery/tree/next, if you want to try out it use the storybook npm task to run the project

MurhafSousli / ngx-gallery