Ticker

</ 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.
Author
Noah Raskin
Updated on
Jun 2, 2024

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!

Check Browser Support

Interactive Table

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.

Clone Project
Documentation
Author:
Status:
Deprecated
New
Updated
Latest Version:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor