</ head>
</ body>
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
tickerSelector: ".cc-ticker"
})
</script>
HTML/Embed
Only tabs with a " " have code.
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
tickerSelector: ".cc-ticker"
})
</script>
Only tabs with a " " have code.
Only tabs with a " " have code.
<!-- CODECRUMBS PROXY -->
<script>
!function(e,t){e[t]=new Proxy(e[t]||{},{get:(e,o)=>new Proxy(e[o]||function(){},{apply:(n,r,a)=>{const c=()=>e[o](...a);"complete"===document.readyState?c():document.addEventListener("readystatechange",(n=>{"complete"===n.target.readyState&&(e?.[o]?c():console.error(`${t}.${o} is not a function. Did it load correctly from the CDN? If not, did you use the correct name.`))}))}})})}(globalThis,"CodeCrumbs");
</script>
Only tabs with a " " have code.
If you have already pasted this code into your project then you can skip this. If you haven't, and it's your first time using CodeCrumbs, then copy this code and navigate to your sites global settings > Custom Code tab > paste it into the <head> (first custom code block). It just needs to exist once.
How to use:
Attribute Reference:
Attribute | Default | Description |
---|---|---|
ticker-speed |
10 | Value in seconds to move the list 100% out of view |
ticker-pause |
false | Either true or false to pause the ticker on hover |
ticker-reverse |
false | Either true or false to reverse |
ticker-gap |
0 | Value number in pixels to control the gap between lists in the track |
ticker-mobile-gap |
-- | Value number in pixels to control the gap between lists in the track for mobile devices |
ticker-tablet-gap |
-- | Value number in pixels to control the gap between lists in the track for tablet devices |

The image above shows the ticker html that we need. Just takes 2 divs + any content inside the list. We need to ensure that only two things are set in Webflow for this to work correctly. Your track div (outer div, which gets the selector class) will act as the track for the child list and its clones. The track div should have its display property set to flex
and its justify property set to start
, which should be the default value, and that's it.
Tutorial Coming Soon!
Check Browser Support
Interactive Table

Contributor
Noah Raskin
Short Description:
Create a smooth continuous slider for all kinds of content such as testimonials, logos, and more. Use simple attributes to control the settings of each ticker.
Extra Info:
No extra info.
Clone Project
Documentation
Author:
Noah Raskin
Status:
Deprecated
New
Updated
This crumb is no longer being supported.
Latest Version:
More related crumbs..
Want to contribute to the community?
Tell us what code you're working with. We would love to see it and possibly add it to the library.