# Draggable Marquee
> Endless image strip you can grab and fling, with inertia that eases back into the auto-scroll.
- Kind: Element
- Page: https://ownlyplans.com/bhaskar/draggable-marquee/
- Licence: MIT (do anything, keep the notice)
## Code
`index.html`
```html
```
`styles.css`
```css
/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */
.op-dm-stage{position:relative;width:100%;height:400px;overflow:hidden;background:#111;color:#fff;display:flex;align-items:center;font-family:Inter,system-ui,sans-serif}
.op-draggable-marquee{position:relative;width:100%;overflow:hidden;cursor:grab;outline-offset:4px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.op-draggable-marquee:focus-visible{outline:2px solid #a3a3a3}
.op-draggable-marquee:active{cursor:grabbing}
.op-dm-track{display:flex;width:max-content;align-items:center;gap:1.25rem;will-change:transform}
.op-dm-item{flex-shrink:0;border-radius:1rem;overflow:hidden}
.op-dm-item img{display:block;height:260px;width:200px;border-radius:1rem;object-fit:cover;pointer-events:none}
@media (prefers-reduced-motion:reduce){.op-draggable-marquee{overflow-x:auto}.op-dm-track{transform:none!important}.op-dm-item[data-copy="duplicate"]{display:none}}
```
`script.js`
```js
(function(){
document.querySelectorAll('.op-draggable-marquee').forEach(function(root){
var track=root.querySelector('.op-dm-track'),orig=[].slice.call(track.children),REPEAT=3;
for(var r=1;r0)v=Math.max(-maxV,Math.min(maxV,(dx/dt)*36.67*throwMul));lastX=x;lastT=now});
function up(){dragging=false}
root.addEventListener('pointerup',up);root.addEventListener('pointercancel',up);
root.addEventListener('keydown',function(e){if(e.key!=='ArrowLeft'&&e.key!=='ArrowRight')return;e.preventDefault();x=wrap(x+(e.key==='ArrowLeft'?1:-1)*root.clientWidth*.35);v=0;paint()});
new ResizeObserver(measure).observe(track);measure();requestAnimationFrame(tick);
});
})();
```
## About
Endless image strip you can grab and fling, with inertia that eases back into the auto-scroll. Ported to plain HTML, CSS and JavaScript from ObsidianUI (github.com/Atharvsinh-codez/ObsidianUI), which is released under the MIT License. The original copyright notice is kept in the code.
---
Also available as JSON: https://ownlyplans.com/bhaskar/draggable-marquee/?format=json
MCP server: https://ownlyplans.com/mcp
