Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
June 17, 2026 - @649.97 (what is this?)
Activity rating: Four Stars Posts & Arts: 61/1k.beats Random | Recent Posts | Guild Recents
News: :wizard: You can make anything on the web! :wizard: Guild Events: Happy Pride Month Fibre Artists!

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  JS-free way to have a photo carousel?


« previous next »
Pages: [1] Print Embed
Author Topic: JS-free way to have a photo carousel?  (Read 252 times)
Skyweaver
Jr. Member ⚓︎
**
View Profile WWW


⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2025!
« on: May 25, 2026 @972.04 » Embed

I'm rebranding from Solinus to Skyweaver and I want to use as little JS as possible for those that have JS disabled.
On my old site I have a few pages with a photo carousel for projects that have more than one image:
https://solinus.neocities.org/designs/2026 under "CLV Media Player (Mar 2026, Personal)"

However, my current solution uses JS and I'd like a CSS way to do that or anything else that doesnt need JS. Provider is Nekoweb if that helps at https://skyweaver.nekoweb.org/ . I was thinking of making a horizontally scrolling div but I imagine it'd be a bit janky, and there's some CSS spec for a photo carousel but it's only on chrome RN.
Logged

Graphic Designer
Skyweaver's website!!

https://i.ibb.co/CK2z7Mc2/userbar-1.png
https://i.ibb.co/sdphzrKd/nichijou.png
https://i.ibb.co/zVdwqCDr/hatsune-miku-1.png
https://i.ibb.co/cKW8QdHh/faa-forum.png
https://i.ibb.co/gbj9yhcZ/userbar-1.png
larvapuppy
Sr. Member ⚓︎
****
View Profile WWWArt


World's Worst Baby Seal
⛺︎ My Room
iMood: larvapuppy
RSS: RSS

Guild Memberships:
Artifacts:
CubesealSpheal, I Choose You!Wave MailsealFirst 1000 Members!Bisexual
« Reply #1 on: May 25, 2026 @364.10 » Embed

I found a CSS tricks article on this here, which seems cool ~ https://css-tricks.com/css-only-carousel/ I might use it myself tbh!
Logged


Artifact Swap: cup 4 uStripe²Nonbinary Neurodivergent
poesu
Jr. Member ⚓︎
**
View Profile WWWArt


⛺︎ My Room
iMood: poesu
RSS: RSS

Artifacts:
Joined 2026!
« Reply #2 on: May 26, 2026 @17.43 » Embed

was thinking of making a horizontally scrolling div but I imagine it'd be a bit janky, and there's some CSS spec for a photo carousel but it's only on chrome RN.

What are you referring to?

I have a horizontally scrolling CSS-only carousel. If you're interested, you can poke around the code here: https://poesu.neocities.org/comms#tier_1. Is it janky though? (/gen question)
Logged

https://poesu.neocities.org/images/my_button.pnghttps://poesu.neocities.org/buttons/88x31/grass.webphttps://poesu.neocities.org/buttons/88x31/accessibility.webp
https://imgur.com/kcQQAM4.pnghttps://imgur.com/6YtLZau.pnghttps://i.imgur.com/YMPbu9R.png

Artifact Swap: EscI met Dan Q on Melonland!Swingin' CatTrans NeurodivergentRainbow NeurodivergentDripping inkyshroomPolyamorous NeurodivergentLesbian NeurodivergentDemi NeurodivergentGay NeurodivergentAce NeurodivergentLarge watercraftNoSmoking!To the Moon!Pink camera flashEyeSeeYouMonabreadloading...HamtaroVideo Camera
Skyweaver
Jr. Member ⚓︎
**
View Profile WWW


⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2025!
« Reply #3 on: May 26, 2026 @40.89 » Embed

What are you referring to?

I have a horizontally scrolling CSS-only carousel. If you're interested, you can poke around the code here: https://poesu.neocities.org/comms#tier_1. Is it janky though? (/gen question)

I'm referring to https://developer.chrome.com/blog/carousels-with-css

Yours seems like the simplest and best solution at the moment, cause it seems that the CSS only solutions require the same dimensions of slides, and I would like to have different sized photos. For example, I may choose to have a logo and a website screenshot in the same slideshow.
Logged

Graphic Designer
Skyweaver's website!!

https://i.ibb.co/CK2z7Mc2/userbar-1.png
https://i.ibb.co/sdphzrKd/nichijou.png
https://i.ibb.co/zVdwqCDr/hatsune-miku-1.png
https://i.ibb.co/cKW8QdHh/faa-forum.png
https://i.ibb.co/gbj9yhcZ/userbar-1.png
poesu
Jr. Member ⚓︎
**
View Profile WWWArt


⛺︎ My Room
iMood: poesu
RSS: RSS

Artifacts:
Joined 2026!
« Reply #4 on: May 26, 2026 @220.31 » Embed

I'm glad to be helpful!

I'm referring to https://developer.chrome.com/blog/carousels-with-css

That's a neat feature, thanks for the link. But yeah, we have to wait a while before it becomes baseline.
Logged

https://poesu.neocities.org/images/my_button.pnghttps://poesu.neocities.org/buttons/88x31/grass.webphttps://poesu.neocities.org/buttons/88x31/accessibility.webp
https://imgur.com/kcQQAM4.pnghttps://imgur.com/6YtLZau.pnghttps://i.imgur.com/YMPbu9R.png

Artifact Swap: EscI met Dan Q on Melonland!Swingin' CatTrans NeurodivergentRainbow NeurodivergentDripping inkyshroomPolyamorous NeurodivergentLesbian NeurodivergentDemi NeurodivergentGay NeurodivergentAce NeurodivergentLarge watercraftNoSmoking!To the Moon!Pink camera flashEyeSeeYouMonabreadloading...HamtaroVideo Camera
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
MelonLand @000

Minecraft: Online
Join: craft.melonking.net