Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer night - @148.08
Activity rating: Four Stars Posts & Arts: 62/1k.beats Random | Recent Posts | Guild Recents
News: :sleep: These are fast times on the World Wide Web~ Guild Events: Summerween Watch-a-thon

+  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 396 times)
Skyweaver
Jr. Member ⚓︎
**
View Profile WWW


⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2025!
« on: a Spring night » 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:
Visited on Melon's 10th Anniversary!CubesealSpheal, I Choose You!Wave MailsealFirst 1000 Members!
« Reply #1 on: a Spring day » 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²hold it!
poesu
Jr. Member ⚓︎
**
View Profile WWWArt


So many links, so little time
⛺︎ My Room
RSS: RSS

Artifacts:
Visited on Melon's 10th Anniversary!CattoJoined 2026!
« Reply #2 on: a Spring night » 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: The best looking guy hereParoxetineAda the Butterflyartifact guyRemember?Have a chillpillTVWeb HostingFloewrDuckHeartI met Dan Q on Melonland!MelonPaintIcecream sundaeDripping inkyshroomPolyamorous NeurodivergentFloppy DiskDemi NeurodivergentGay NeurodivergentPastel eyebat
Skyweaver
Jr. Member ⚓︎
**
View Profile WWW


⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2025!
« Reply #3 on: a Spring night » 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


So many links, so little time
⛺︎ My Room
RSS: RSS

Artifacts:
Visited on Melon's 10th Anniversary!CattoJoined 2026!
« Reply #4 on: a Spring night » 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: The best looking guy hereParoxetineAda the Butterflyartifact guyRemember?Have a chillpillTVWeb HostingFloewrDuckHeartI met Dan Q on Melonland!MelonPaintIcecream sundaeDripping inkyshroomPolyamorous NeurodivergentFloppy DiskDemi NeurodivergentGay NeurodivergentPastel eyebat
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
@000 MelonLand Zap! Want to Login or Join ? Forum Art Hub Chat Webring Editor Recent Edits Tenement Arcade Web Guides Graphics Catalogue Wiki Newsletters Image Stream
Melon's Sites TamaNotchi Textures PixelSea GifyPet MoMG Ozwomp Online Loom Videos Leaky Webring Melonking
Tools Melon Software ArtHub Embed Maker ML Passports
Outlinks Webrings Internet Phone Book HTML Energy Declarations Hackers & Designers Frutiger Aero Forum m15o's Web Services 32Bit Cafe iMood
Minecraft: Online
Join: craft.melonking.net