js

import DriftSlider from 'drift-slider';
import { Navigation, Pagination } from 'drift-slider/modules';

new DriftSlider('.slider', {
  modules: [Navigation, Pagination],
  navigation: true,
  pagination: { el: '.pagination', type: 'bullets' }
});

js

const { Navigation, Pagination } = DriftSlider;

new DriftSlider('.slider', {
  modules: [Navigation, Pagination],
  navigation: true,
  pagination: { el: '.pagination' }
});

js

// ESM
import { Navigation } from 'drift-slider/modules';

// UMD
const { Navigation } = DriftSlider;

js

new DriftSlider('.slider', {
  modules: [Navigation],
  navigation: {
    nextEl: '.btn-next',
    prevEl: '.btn-prev',
    disabledClass: 'arrow-disabled'
  }
});

js

// ESM
import { Pagination } from 'drift-slider/modules';

// UMD
const { Pagination } = DriftSlider;

js

new DriftSlider('.slider', {
  modules: [Pagination],
  pagination: {
    el: '.slider-pagination',
    type: 'bullets',
    clickable: true,
    renderBullet(index, className) {
      return `<span class="${className}">${index + 1}</span>`;
    }
  }
});

js

// ESM
import { Autoplay } from 'drift-slider/modules';

// UMD
const { Autoplay } = DriftSlider;

js

const slider = new DriftSlider('.slider', {
  modules: [Autoplay],
  autoplay: {
    enabled: true,
    delay: 5000,
    pauseOnMouseEnter: true,
    disableOnInteraction: false
  }
});

slider.on('autoplayPause', () => {
  console.log('Autoplay paused');
});

// Programmatic control
slider.autoplay.stop();
slider.autoplay.start();

js

// ESM
import { EffectFade } from 'drift-slider/modules';

// UMD
const { EffectFade } = DriftSlider;

js

new DriftSlider('.slider', {
  modules: [EffectFade],
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  }
});

js

// ESM
import { EffectCoverflow } from 'drift-slider/modules';

// UMD
const { EffectCoverflow } = DriftSlider;

js

new DriftSlider('.slider', {
  modules: [EffectCoverflow],
  effect: 'coverflow',
  centeredSlides: true,
  slidesPerView: 3,
  coverflowEffect: {
    depth: 250,
    rotate: 45,
    scale: 0.8,
    overlay: true,
    overlayColor: 'rgba(0,0,0,0.5)'
  }
});

js

// ESM
import { EffectCards } from 'drift-slider/modules';

// UMD
const { EffectCards } = DriftSlider;

js

new DriftSlider('.slider', {
  modules: [EffectCards],
  effect: 'cards',
  cardsEffect: {
    mode: 'stack',
    direction: 'tl-br',
    offsetX: 20,
    offsetY: 20,
    scale: 0.9,
    shadow: true,
    shadowBlur: 30
  }
});

js

// ESM
import { Keyboard } from 'drift-slider/modules';

// UMD
const { Keyboard } = DriftSlider;

js

new DriftSlider('.slider', {
  modules: [Keyboard],
  keyboard: {
    enabled: true,
    onlyInViewport: true
  }
});

js

// ESM
import { A11y } from 'drift-slider/modules';

// UMD
const { A11y } = DriftSlider;

js

new DriftSlider('.slider', {
  modules: [Navigation, Pagination, A11y],
  navigation: true,
  pagination: { el: '.pagination' },
  a11y: {
    enabled: true,
    containerMessage: 'Featured products carousel',
    prevSlideMessage: 'Go to previous product',
    nextSlideMessage: 'Go to next product',
    paginationBulletMessage: 'Go to product {{index}}'
  }
});

js

// ESM
import { ScrollAos } from 'drift-slider/modules';

// UMD
const { ScrollAos } = DriftSlider;

js

// Make sure AOS is loaded and initialized
import AOS from 'aos';
import 'aos/dist/aos.css';
AOS.init();

new DriftSlider('.slider', {
  modules: [ScrollAos],
  scrollAos: {
    enabled: true,
    animation: 'fade-up',
    duration: 1000,
    slideAnimation: 'fade-right',
    slideDelay: 150
  }
});