Name: Pagiflow
Rating: 4.9 (48 reviews)
Author: Pagiflow

Svelte Slider Quickstart

Fast path for developers searching for a Svelte slider component, Svelte carousel library, or Swiper alternative for SvelteKit.

What you get with pagiflow/svelte: component API, action API, touch/swipe support, responsive breakpoints, thumbnails, autoplay, loop mode, and runtime control methods.

Best for: product galleries, testimonials, hero carousels, media sliders, and synced main/thumb layouts in Svelte and SvelteKit apps.

Svelte Integration

Install and use Pagiflow in Svelte with pagiflow/svelte.

Install

npm i pagiflow

Basic Usage

<script>
  import { Pagiflow } from 'pagiflow/svelte';
  import 'pagiflow/css';
</script>

<Pagiflow nav loop itemsPerSlide={1}>
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</Pagiflow>

Svelte Action (createPagiflow)

The createPagiflow function returns a controller with a Svelte action for a headless integration.

<script>
  import { createPagiflow } from 'pagiflow/svelte';
  import 'pagiflow/css';

  const slider = createPagiflow({ 
    loop: true, 
    itemsPerSlide: 2 
  });

  $effect(() => {
    console.log("Reactive $effect Fired! New index:", $slider.currentIndex);
  });

  $effect(() => {
    if ($slider.instance) {
      $slider.instance.onSlideChange((index) => {
        console.log("Slide changed to index via instance method:", index);
      });
    }
  });
</script>

<div use:slider.action class="my-slider">
  <div class="slide-1">1</div>
  <div class="slide-2">2</div>
  <div class="slide-3">3</div>
</div>

<button onclick={slider.prev}>Prev</button>
<button onclick={slider.next}>Next</button>

Custom Slots

Inject custom navigation and pagination UI using Svelte's named slots.

Slot Injection

<Pagiflow loop>
  <div class="slide">...</div>

  <!-- Custom Navigation -->
  <svelte:fragment slot="nav" let:next let:prev let:currentIndex>
    <div class="custom-nav">
      <button on:click={prev}>Left</button>
      <button on:click={next}>Right</button>
    </div>
  </svelte:fragment>

  <!-- Custom Pagination -->
  <svelte:fragment slot="pagination" let:goTo let:currentIndex>
    <div class="dots">
      <button class:active={currentIndex === 0} on:click={() => goTo(0)} />
      <button class:active={currentIndex === 1} on:click={() => goTo(1)} />
    </div>
  </svelte:fragment>
</Pagiflow>

Options usage

Options can be passed as individual props to the Pagiflow component.

Reactive Props

<script>
  let gapSize = 10;
</script>

<Pagiflow 
  itemsPerSlide={3} 
  gap={gapSize} 
  autoplay={true} 
  autoplayDelay={2000}
>
  <!-- slides -->
</Pagiflow>

Thumbnail Navigation

Show thumbnail strip that syncs with the main slider. Supports top, bottom, left, and right positions.

Thumbnails bottom

<Pagiflow
  loop
  thumbnails={{
    enabled: true,
    position: 'bottom',
    thumbWidth: 90,
    gap: 6
  }}
>
  <div class="slide">...</div>
  <div class="slide">...</div>
</Pagiflow>

Slider Sync

Connect two slider instances together for synchronized navigation.

Synchronized Sliders

<!-- Main Slider -->
<Pagiflow id="main-a" loop>
  <div>Main 1</div>
</Pagiflow>

<!-- Nav Slider -->
<Pagiflow sync="#main-a" itemsPerSlide={3} loop>
  <div>Thumb 1</div>
</Pagiflow>

Responsive Breakpoints

Customize slider behavior across different screen sizes.

Adaptive Layout

<Pagiflow
  nav
  responsive={{
    0: { itemsPerSlide: 1, gap: 0 },
    768: { itemsPerSlide: 2, gap: 16 },
    1200: { itemsPerSlide: 3, gap: 24 }
  }}
>
  <div>Slide 1</div>
  <div>Slide 2</div>
</Pagiflow>

Methods

Access slider API via component binding or action controller.

Component Binding

<script>
  let slider;
</script>

<Pagiflow bind:this={slider}>...</Pagiflow>

<button on:click={() => slider.next()}>Next</button>
<button on:click={() => slider.goTo(2)}>Go to 3rd</button>

.next()

Go to the next slide.

.prev()

Go to the previous slide.

.goTo(index, options?)

Jump to slide by zero-based index.

.play() / .pause()

Control the autoplay timer.

.resume()

Resume from paused state (autoplay/autoScroll).

.togglePlayPause()

Toggle between play and pause.

.setOptions(newOptions, rebuild?)

Update options at runtime. Rebuilds if structural options change.

.reInit(newOptions?)

Completely reinitialize the slider instance.

.html(content?)

Get or set slide HTML. Passing content will rebuild the track.

.onSlideChange(callback)

Subscribe to index changes from the core instance callback API.

.destroy()

Destroy the slider instance and remove listeners/clones.

Events

Listen for slider state changes using Svelte's on: syntax.

Advanced Methods (onSlideChange + destroy)

<script lang="ts">
  import { Pagiflow, createPagiflow } from 'pagiflow/svelte';
  import 'pagiflow/css';

  // Component instance API (bind:this)
  let slider: any;

  function setupCallbacks() {
    // onSlideChange(callback) from core instance
    slider?.instance?.onSlideChange((index: number) => {
      console.log('Component current index:', index);
    });
  }

  function destroyComponentSlider() {
    // destroy() from core instance
    slider?.instance?.destroy();
  }

  // Action/controller API
  const actionSlider = createPagiflow({ loop: true, nav: true });
  let actionInstance: any = null;

  $: actionInstance = $actionSlider.instance;

  $: if (actionInstance) {
    actionInstance.onSlideChange((index: number) => {
      console.log('Action current index:', index);
    });
  }

  function destroyActionSlider() {
    actionInstance?.destroy();
  }
</script>

<h3>Component example</h3>
<Pagiflow bind:this={slider} loop nav on:slideChange={setupCallbacks}>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</Pagiflow>

<button on:click={() => slider?.next()}>Next</button>
<button on:click={destroyComponentSlider}>Destroy Component Slider</button>

<hr />

<h3>Action example</h3>
<div use:actionSlider.action class="my-slider">
  <div class="slide-1">A</div>
  <div class="slide-2">B</div>
  <div class="slide-3">C</div>
</div>

<button on:click={actionSlider.next}>Next</button>
<button on:click={destroyActionSlider}>Destroy Action Slider</button>

slideChange event

<script>
  function handleSlideChange(event) {
    console.log('Active index:', event.detail.index);
  }
</script>

<Pagiflow on:slideChange={handleSlideChange}>
  <!-- slides -->
</Pagiflow>

All Options Reference

Complete list of all configuration options.

Option	Type	Default	Description
direction	string	'horizontal'	Slide axis: `'horizontal'` or `'vertical'`.
itemsPerSlide	number	1	Visible slides at once.
slidesToScroll	number	1	Steps per navigation click.
gap	number	8	Pixels between slides.
height	string\|number	auto	Viewport height (Required when using vertical, fade, or thumbnails mode.).
startIndex	number	0	Initial slide index.
loop	boolean	false	Infinite loop with DOM clones.
speed	number	400	Transition duration (ms).
animate	boolean	true	Enable CSS transitions.
fade	boolean	false	Crossfade instead of slide.
nav	boolean	false	Show built-in prev/next buttons.
navDisabledEnd	boolean	false	Disable (not hide) buttons at ends.
navigation	object	null	External buttons `{ prev, next }`.
prevIcon	string	'‹'	Prev button HTML.
nextIcon	string	'›'	Next button HTML.
prevPosition	string\|obj	null	Absolute position for prev button.
nextPosition	string\|obj	null	Absolute position for next button.
paginate	boolean	false	Show pagination dots.
paginationPosition	string\|obj	null	Custom pagination position.
autoplay	boolean	false	Auto-advance slides.
autoplayDelay	number	3000	Delay between auto advances (ms).
pauseOnHover	boolean	true	Pause autoplay on hover.
autoScroll	boolean	false	Continuous marquee scrolling.
autoScrollSpeed	number	0.5	Pixels per animation frame.
autoScrollDirection	string	'left'	`'left'` or `'right'`.
swipeThreshold	number	60	Min swipe distance to trigger change.
grid	boolean	false	Enable grid mode per slide.
gridColumns	number	2	Grid column count.
gridFill	boolean	false	Fill last page with recycled items.
thumbnails.enabled	boolean	false	Show thumbnail strip.
thumbnails.position	string	'bottom'	top / bottom / left / right.
thumbnails.thumbWidth	number	80	Thumbnail width in px.
thumbnails.gap	number	5	Gap between thumbnails.
thumbnails.sidebarHeight	string	null	Sidebar height for left/right mode.
centerMode	boolean	false	Center active slide with peeking neighbors.
centerPadding	number\|string	0	Side padding for center mode.
rtl	boolean	false	Right-to-left mode.
keyboard	boolean	false	Arrow key navigation.
lazyLoad	boolean	false	IntersectionObserver image lazy load.
sync	string\|inst	null	Selector or instance to sync with.
responsive	object	{}	Breakpoint → options map.
html	str\|arr	null	Inject initial slide HTML during initialization (core/action usage; not a direct `<Pagiflow>` prop).

See All Docs for the full list of 30+ options.

Frequently Asked Questions

Common questions about using pagiflow/svelte.

Run npm i pagiflow, then import from pagiflow/svelte.

Use the <Pagiflow> component for quick setups. Use the createPagiflow action for custom DOM structures and headless integration.

Props passed to the component are reactive. Changing them will automatically call setOptions on the underlying instance.

Yes. Import Pagiflow or createPagiflow from pagiflow/svelte and use it in client-rendered components. The package supports Svelte and SvelteKit workflows.

on:slideChange is the Svelte event from the component. onSlideChange(callback) is the core instance method available through instance or action controller access.

Yes. Use methods like next, prev, goTo, setOptions, reInit, and destroy via component binding or action controller instance.

Pagiflow SvelteDocumentation