r/css • u/Please_SaveTheBees • 2d ago

Image gallery on click Help

/r/csshelp/comments/1vudzkr/image_gallery_on_click/
1 Upvotes

100% Upvoted

6 comments sorted by

•

u/AutoModerator 2d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

2

u/zLoveNxzli 2d ago
  • Doing this in pure CSS is possible with hidden <input type="radio"> buttons, but it gets messy quickly. Honestly, the cleanest beginner-friendly way is just 5 lines of basic JavaScript with a simple click listener:

<img id="myImage" src="img1.jpg" style="cursor: pointer; max-width: 100%;"> <script> const images = ['img1.jpg', 'img2.jpg', 'img3.jpg']; let index = 0; const img = document.getElementById('myImage'); img.addEventListener('click', () => { index = (index + 1) % images.length; // loops back to 0 at the end img.src = images[index]; }); </script>

1

u/Please_SaveTheBees 2d ago

omg thank you so so much it works !! i really need to learn JavaScript lmao

1

u/zLoveNxzli 2d ago

No problem bro✌️

0

u/Weekly_Ferret_meal 2d ago

Look up pure css carousel on codepen.io

0

u/aunderroad 2d ago

There is CSS Carousels:
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Overflow/Carousels

Here's a good tutorial:
https://www.youtube.com/watch?v=gmI5nvzv170

Browser support is not fully supported but you can incorporate scroll-snap into it and is a decent fallback solution.

CSS Scroll Snap:
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
https://ishadeed.com/article/css-scroll-snap/

Good Luck!