Horizontal Direction direction: 'horizontal'

Pagiflow('#demo-horizontal', { 
  direction: 'horizontal', nav: true 
});

Vertical Direction direction: 'vertical'

Pagiflow('#demo-vertical', { 
  direction: 'vertical', height: 180, nav: true 
});

Gap & Items itemsPerSlide: 3, gap: 15

Pagiflow('#demo-gap', {
  itemsPerSlide: 3, slidesToScroll: 2, gap: 15, nav: true
});

Loop & Height loop: true, height: '140px'

Pagiflow('#demo-loop', {
  loop: true, height: '140px', nav: true, speed: 600
});

Custom Navigation prevIcon, nextIcon, navDisabledEnd

Nav Built-in Custom

Slide 2

Built-in customized, non-loop (stops at end)

External Buttons

Slide 2

External buttons bound

// Left Custom Built-in
Pagiflow('#demo-nav-custom', { 
  nav: true, prevIcon: "←", nextIcon: "→", navDisabledEnd: true 
});

// Right External
Pagiflow('#demo-nav-ext', {
  navigation: { prev: '#extPrev', next: '#extNext' }
});

Pagination paginate, paginationPosition

Pagiflow('#demo-pag', {
  paginate: true, 
  paginationPosition: 'bottom-right'
  // Or: { bottom: 10, right: 20 }
});

Autoplay autoplay, pauseOnHover

Hover to

Pause...

Autoplay

Pagiflow('#demo-auto', {
  autoplay: true, 
  autoplayDelay: 1500, 
  pauseOnHover: true,
  loop: true
});

AutoScroll (Marquee) autoScroll, autoScrollSpeed

Auto 1

Auto 2

Auto 3

Auto 4

Auto 5

Pagiflow('#demo-ticker', {
  autoScroll: true,
  autoScrollSpeed: 1, // pixels per frame
  autoScrollDirection: 'left', // 'right'
  pauseOnHover: true,
  itemsPerSlide: 3,
  gap: 15
});

Fade Transition fade: true

Fade 1

Fade 2

Fade 3

Pagiflow('#demo-fade', {
  fade: true,
  nav: true,
  speed: 800,
  loop: true
});

Center Mode centerMode, centerPadding

Center 1

Center 2

Center 3

Center 4

Pagiflow('#demo-center', {
  centerMode: true,
  centerPadding: 80, // Peeking width
  gap: 10,
  loop: true,
  nav: true
});

Grid Mode grid, gridColumns, gridFill

Pagiflow('#demo-grid', {
  grid: true,
  gridColumns: 2,
  itemsPerSlide: 4, // 2 rows x 2 cols
  gridFill: true, // Auto-fill empty slots
  gap: 10,
  paginate: true
});

Slider Sync sync

Main 1

Main 2

Main 3

Main 4

Main 5

Main 6

Nav 1

Nav 2

Nav 3

Nav 4

Nav 5

Nav 6

Pagiflow('#demo-sync-main', { nav: true });
Pagiflow('#demo-sync-nav', { 
  itemsPerSlide: 3, gap: 5,
  sync: '#demo-sync-main' 
});

Thumbnails thumbnails object

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Pagiflow('#demo-thumbnails', {
  thumbnails: {
    enabled: true,
    position: 'bottom', // 'top', 'left', 'right'
    thumbWidth: 100,
    gap: 8,
    sidebarHeight: '200px' // for left/right
  },
  loop: true, nav: true
});

RTL Support rtl: true

One

Two

Three

Pagiflow('#demo-rtl', { 
  rtl: true, nav: true, loop: true 
});

Keyboard Mode keyboard

Click Me

Press →

Press ←

Pagiflow('#demo-kbd', { 
  keyboard: true, 
  swipeThreshold: 40 
});

Lazy Loading lazyLoad

Pagiflow('#demo-lazy', { 
  lazyLoad: true, 
  nav: true 
});

Responsive Breakpoints responsive

R 1

R 2

R 3

R 4

R 5

Pagiflow('#demo-responsive', {
  itemsPerSlide: 1,  gap: 5,
  responsive: {
    576: { itemsPerSlide: 2, gap: 10 },
    768: { itemsPerSlide: 3, gap: 15, autoplay: true },
    1200: { itemsPerSlide: 4, gap: 20 }
  }
});