Our great sponsors
-
sveltekit-simple-image-gallery
Simple Svelte responsive image gallery: create a ribbon gallery, using Svelte dimension bindings to maintain the aspect ratio of all images.
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Lastly create a src/lib/assets/ folder and download the six images from that location in the Git repo. Finally create src/lib/generated and repeat, copying the JavaScript files from the equivalent folder on the GitHub repo. Typically you would want to generate these files in a script, updating for required images formats, widths and pixel densities, though I have done this already to save time. You can take a look at the script which generates this data including low resolution placeholders in the repo.
We have a few image loading optimisations here to help improve Core Web Vitals together with the user experience as well as SEO of your app. We already mentioned images are lazy loaded. This means the user's browser initially only loads the images that are in view. The others are only loaded when the user scrolls over. The vanilla-lazyload plugin helps with this. On top we give a hint to the browser in line 104 to load images lazily. We want the user to see something when the page first load so the first image loads eagerly.
We will use feather icons for our forward and previous user interface buttons. Create a folder at src/lib/components then add NextIcon.svelte and PreviousIcon.svelte to the folder, and paste in this code: