# image slider

Published articles for image slider.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Building an Infinite Loom: Unravelling Images into Threads with Three.js

DevFeed: [Building an Infinite Loom: Unravelling Images into Threads with Three.js](<https://devfeed.tech/articles/building-an-infinite-loom-unravelling-images-into-threads-with-three-js-4339.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/05/building-an-infinite-loom-unravelling-images-into-threads-with-three-js/>)

Author: Clément Grellier

Published: 2026-09-05T12:50:25Z

Content type: tutorial

Language: en

Sources: [Codrops](<https://devfeed.tech/sources/codrops.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [creative-web-experiments](<https://devfeed.tech/tags/creative-web-experiments.md>), [digital-art](<https://devfeed.tech/tags/digital-art.md>), [frontend-animation](<https://devfeed.tech/tags/frontend-animation.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [glsl-shaders](<https://devfeed.tech/tags/glsl-shaders.md>), [gsap](<https://devfeed.tech/tags/gsap.md>), [html](<https://devfeed.tech/tags/html.md>), [image-animation](<https://devfeed.tech/tags/image-animation.md>), [image-distortion](<https://devfeed.tech/tags/image-distortion.md>), [image-effects](<https://devfeed.tech/tags/image-effects.md>), [image-slider](<https://devfeed.tech/tags/image-slider.md>), [images](<https://devfeed.tech/tags/images.md>), [infinite-slider](<https://devfeed.tech/tags/infinite-slider.md>), [interactive-images](<https://devfeed.tech/tags/interactive-images.md>), [interactive-web-design](<https://devfeed.tech/tags/interactive-web-design.md>), [javascript-animation](<https://devfeed.tech/tags/javascript-animation.md>), [marquee](<https://devfeed.tech/tags/marquee.md>), [playground](<https://devfeed.tech/tags/playground.md>), [ribbon-animation](<https://devfeed.tech/tags/ribbon-animation.md>), [shader-effects](<https://devfeed.tech/tags/shader-effects.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [thread-animation](<https://devfeed.tech/tags/thread-animation.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-demo](<https://devfeed.tech/tags/three-js-demo.md>), [three-js-shaders](<https://devfeed.tech/tags/three-js-shaders.md>), [unraveling-effect](<https://devfeed.tech/tags/unraveling-effect.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-animation](<https://devfeed.tech/tags/webgl-animation.md>), [webgl-demo](<https://devfeed.tech/tags/webgl-demo.md>)

### AI overview

A Three.js tutorial for an infinite image strip whose cards are split into independently animated horizontal ribbons. It explains how separate geometry and shaders create weaving, unraveling, gaps, fading, and varied thread motion.

### Source excerpt

An experimental Three.js demo that transforms images into flowing ribbons, weaving them together and unraveling them as they move across the screen.

## A before/after image slider in 2 lines of JavaScript

DevFeed: [A before/after image slider in 2 lines of JavaScript](<https://devfeed.tech/articles/a-before-after-image-slider-in-2-lines-of-javascript-9018.md>)

Original publisher: [Read original article](<https://markodenic.tech/a-before-after-image-slider-in-2-lines-of-javascript/>)

Author: Marko

Published: 2026-08-15T09:34:36Z

Content type: tutorial

Language: en

Sources: [Marko Denic Tech](<https://devfeed.tech/sources/marko-denic-tech.md>)

Topics: [image slider](<https://devfeed.tech/topics/image-slider.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [blog-for-developers](<https://devfeed.tech/tags/blog-for-developers.md>), [browser](<https://devfeed.tech/tags/browser.md>), [build-faster](<https://devfeed.tech/tags/build-faster.md>), [code-productivity](<https://devfeed.tech/tags/code-productivity.md>), [code-smarter](<https://devfeed.tech/tags/code-smarter.md>), [content-monetization](<https://devfeed.tech/tags/content-monetization.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animation](<https://devfeed.tech/tags/css-animation.md>), [css-performance](<https://devfeed.tech/tags/css-performance.md>), [developer-growth](<https://devfeed.tech/tags/developer-growth.md>), [developer-resources](<https://devfeed.tech/tags/developer-resources.md>), [email-newsletter-for-coders](<https://devfeed.tech/tags/email-newsletter-for-coders.md>), [front-end-development](<https://devfeed.tech/tags/front-end-development.md>), [github-profile-automation](<https://devfeed.tech/tags/github-profile-automation.md>), [html](<https://devfeed.tech/tags/html.md>), [html-tips](<https://devfeed.tech/tags/html-tips.md>), [image-slider](<https://devfeed.tech/tags/image-slider.md>), [images](<https://devfeed.tech/tags/images.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [javascript-tricks](<https://devfeed.tech/tags/javascript-tricks.md>), [learn-to-code](<https://devfeed.tech/tags/learn-to-code.md>), [responsive-design-tips](<https://devfeed.tech/tags/responsive-design-tips.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web-dev-newsletter](<https://devfeed.tech/tags/web-dev-newsletter.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [web-development-tips](<https://devfeed.tech/tags/web-development-tips.md>), [weekly-dev-tips](<https://devfeed.tech/tags/weekly-dev-tips.md>), [workflow-optimization](<https://devfeed.tech/tags/workflow-optimization.md>)

### AI overview

A concise tutorial showing how to build an accessible before/after image slider with two stacked images, CSS clipping, a native range input, and only two lines of JavaScript.

### Source excerpt

The plugin you were about to install is just input[type=range]. Stack two images, clip one, done. Works with the keyboard too.