Help with horizontal scroll for custom toolbar and slideshow layout #162

JGK1213 · 2023-07-27T09:20:02Z

JGK1213
Jul 27, 2023

Hi! Just want to start off by saying thank you for creating this and for all the great resources and documentation!

I've been able to do so much customization, but I'm stuck on a couple things.

I added a custom toolbar that allows for different categories, the user can click on the category and the carousel will scroll to the specific index. I have that working. The part I can't figure out is how to add a horizontal scroll in the toolbar for mobile view. I tried following this, Added inline style issue #146 (comment), but doesn't seem to add back the horizontal scroll when I add this plugins={[({ remove }) => remove("no-scroll")]}.
What's the best way to update the width of the carousel to allow for the layout in the screenshots? Where the current active image shows, but also the prev and next show slightly on either side? I was messing around with the width css, but just curious if you have a good approach in mind.

Here are screenshots for clarity:

desktop:

mobile:

Thank you!

Answered by igordanchenko

Jul 27, 2023

Hi there!

I'm glad to hear you are enjoying this library so far.

I added a custom toolbar that allows for different categories, the user can click on the category and the carousel will scroll to the specific index. I have that working. The part I can't figure out is how to add a horizontal scroll in the toolbar for mobile view. I tried following this, #146 (comment), but doesn't seem to add back the horizontal scroll when I add this plugins={[({ remove }) => remove("no-scroll")]}.

I'm not sure that discussion is relevant to your case. Let me explain. In the case when your page content is larger than the viewport height, some browsers (e.g. on Windows) display vertical scrollbar. So when…

View full answer

igordanchenko · 2023-07-27T16:15:52Z

igordanchenko
Jul 27, 2023
Maintainer

Hi there!

I'm glad to hear you are enjoying this library so far.

I added a custom toolbar that allows for different categories, the user can click on the category and the carousel will scroll to the specific index. I have that working. The part I can't figure out is how to add a horizontal scroll in the toolbar for mobile view. I tried following this, #146 (comment), but doesn't seem to add back the horizontal scroll when I add this plugins={[({ remove }) => remove("no-scroll")]}.

I'm not sure that discussion is relevant to your case. Let me explain. In the case when your page content is larger than the viewport height, some browsers (e.g. on Windows) display vertical scrollbar. So when the lightbox opens, that vertical scrollbar remains visible but it makes no sense since the lightbox takes over fullscreen user experience. So when the lightbox opens, it hides that scrollbar by setting document <body> height to 100% and overflow to hidden.

But in this case you probably want to limit the horizontal dimension of your toolbar and set overflow to auto. Please see the below example. It works fine on iOS, however I'm not sure how well it's going to work on desktop browsers on Windows (as they may be showing horizontal scrollbar).

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-162-98pclr

What's the best way to update the width of the carousel to allow for the layout in the screenshots? Where the current active image shows, but also the prev and next show slightly on either side? I was messing around with the width css, but just curious if you have a good approach in mind.

To achieve this effect, I'd wrap carousel in another <div> and give it some extra margin. You'd also need to adjust the position of navigation buttons and the toolbar. I'm assuming your images are of the same aspect ratio, as this layout may look somewhat odd otherwise. Please see the below example.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-162-98pclr

I hope this helps.

1 reply

JGK1213 Jul 27, 2023
Author

thanks for the quick reply! I'll take a look at those examples you added and go from there!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Help with horizontal scroll for custom toolbar and slideshow layout #162

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Help with horizontal scroll for custom toolbar and slideshow layout #162

JGK1213 Jul 27, 2023

Replies: 1 comment · 1 reply

igordanchenko Jul 27, 2023 Maintainer

JGK1213 Jul 27, 2023 Author

JGK1213
Jul 27, 2023

Replies: 1 comment 1 reply

igordanchenko
Jul 27, 2023
Maintainer

JGK1213 Jul 27, 2023
Author