← Back to Demos

Fullscreen Hero

全螢幕 Hero

Full-screen hero slider with parallax-inspired CSS effects and autoplay.

全螢幕 Hero 輪播，搭配視差風格 CSS 效果和自動播放。

  • Welcome
  • Explore
  • Create
  • Build
  • Launch

Source Code

js 
var DS = DriftSlider;
var slider = new DS.DriftSlider('.hero-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.Autoplay, DS.A11y],
  loop: true,
  speed: 800,
  grabCursor: true,
  autoplay: {
    enabled: true,
    delay: 4000,
    disableOnInteraction: false,
  },
});