Dual Ticker

雙向跑馬燈

Two ticker rows scrolling in opposite directions at different speeds — a popular visual pattern for showcasing categories or tags.

兩列跑馬燈以不同速度反向滾動 — 常見於展示分類或標籤的視覺設計。

Design
Marketing
Engineering
Analytics
Product
Growth
Research
Strategy

Finance
Operations
DevOps
Security
Platform
Support
Creative
Data

Source Code

var DS = DriftSlider;

// Top row — normal direction
var top = new DS.DriftSlider('#ticker-top', {
  modules: [DS.Autoplay],
  slidesPerView: 5,
  spaceBetween: 16,
  loop: true,
  speed: 3000,
  grabCursor: true,
  autoplay: {
    enabled: true,
    ticker: true,
    tickerSpeed: 1,
    pauseOnMouseEnter: true,
  },
});

// Bottom row — reverse direction, slightly slower
var bottom = new DS.DriftSlider('#ticker-bottom', {
  modules: [DS.Autoplay],
  slidesPerView: 5,
  spaceBetween: 16,
  loop: true,
  speed: 3000,
  grabCursor: true,
  autoplay: {
    enabled: true,
    ticker: true,
    tickerSpeed: 0.7,
    reverseDirection: true,
    pauseOnMouseEnter: true,
  },
});