Ticker

Function

UI & UX

</ 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.

<!-- 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.

Author

Noah Raskin

Updated on

Jun 2, 2024

Demo

See Demo

How to use:

Unlock more with PRO

Want to learn how to use this Crumb? Unlock detailed documentation, video tutorials, comments & support!

Upgrade to Pro

Unlock more with PRO

Want to learn how to use this Crumb? Unlock detailed documentation, video tutorials, comments & support!

Upgrade to Pro

‍

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!