react-lazyload VS Swiper

In this situation, lazy loading, a popular technique used to defer the loading of resources until needed, can be implemented to defer rendering a component unless the user scrolls down to bring it into the viewport. One of the most popular lazy loading libraries in React, react-lazyload, makes use of conditional rendering to render components only when they are scrolled into the viewport of the user's browser or, in other words, are visible to the user.

React LazyLoad is a library specifically built for that purpose. You just wrap your component, and this library takes care of the rest.

React-lazyload :

I'd you are using a frontend framework, you can use lazy loading that loads more content on scroll. For Vue: https://github.com/hilongjw/vue-lazyload For React: https://github.com/twobin/react-lazyload

Also, consider using react-lazyload or react-window or next.js dynamic import to handle your excessive dom size.

SwiperJS?, they’ve got plenty of templates there.

Maybe swiper? https://www.npmjs.com/package/swiper

just use https://swiperjs.com/ ... has all the usability imho.

That said, B2 does not include a photo viewer. However, folks who know html can easily add a photo viewer. For instance, we posted this example album to help developers learn how to read files using Python. This sample album uses the open source Swiper album.

You mention YAGNI, but I think the bigger blocker is "Don't reinvent the wheel" - which I think is the most misunderstood bit of programming advice out there. In my SvelteKit app, I am not using a "UI Framework" that provides components to me. I don't need to. Svelte is simple enough that I can build almost anything myself. I've looked at Skeleton's source code, and their components on average are not better than versions I have rolled myself. There are a few cases where it's better to use a framework. Sliders, for instance, have a lot of edge cases. So I use Swiper for carousels. But even then, I could build a working basic slider (that doesn't address the numerous edge cases) myself in an hour. The other case is Headless UI but even there, I disagree with how he implemented some things and it's possible to roll your own Svelte Headless UI just from Tailwind's source.

Hello everyone! I'm trying to keep the arrows in SwiperJS from overlapping on my slides, but I can't seem to find a working/viable solution. I've checked this post out, https://github.com/nolimits4web/swiper/issues/3736, but the first solution mentioned just makes the arrows disappear and I can't figure out how to fix the CSS to restyle them, and the second solution mentioned just seems very temporary. If anyone could help with any suggestions or ideas to solve this problem, it would be very much appreciated! Thank you!