[ad_1]
I’m looking to create a small gallery on my website. I would want the first image to be the big one at the top and then three smaller images below (total of 4 in the gallery).
It should allow the user to click any of the images to get a closer look/full page view of the image.
How can I do this without needing to create 1 image at the top and then adding an image carousel at the bottom? And instead have it has one ‘component’ / gallery?
[ad_2]
i would use slick and slider syncing
then i would loop thru the top image and php > break after the first loop
i would then loop the bottom images and php > continue over the first
then it should just work the way you want it, click the bottom and it will change the top big image
you can try
[https://splidejs.com/#thumbnail-navigation-example])
good look
Check out the Advanced Gallery Block from Kadence. It does exactly this style of gallery (and others).
Good opportunity to learn Vue. You could easily make that a component and Vue is a valuable skill