SolidJS Integration

Pagiflow Solid
Documentation

Official SolidJS integration docs for Pagiflow. Learn component props, primitives (createPagiflow), custom render props, imperative methods, and responsive integration.

30+ Options
10+Methods
0Dependencies
∞Possibilities

Solid Integration

Install and use Pagiflow in SolidJS with pagiflow/solid.

Install
npm i pagiflow
Basic Usage
import { Pagiflow } from 'pagiflow/solid';
import 'pagiflow/css';

export default function App() {
  return (
    <Pagiflow id="slider-a" nav loop itemsPerSlide={1}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </Pagiflow>
  );
}
createPagiflow Primitive

The createPagiflow primitive returns a reactive controller for a headless integration.

import { createPagiflow } from 'pagiflow/solid';

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

  return (
    <div>
      <div class="controls">
        <button onClick={slider.prev}>Prev</button>
        <span>Active: {slider.currentIndex() + 1}</span>
        <button onClick={slider.next}>Next</button>
      </div>

      <div ref={slider.ref} class="pagiflow">
        <div class="pagiflow-slide">1</div>
        <div class="pagiflow-slide">2</div>
        <div class="pagiflow-slide">3</div>
      </div>
    </div>
  );
}

Custom Rendering

Use renderNav and renderPagination props for custom UI logic.

Render Props
<Pagiflow
  renderNav={(props) => (
    <div class="my-nav">
      <button onClick={props.prev}>Left</button>
      <button onClick={props.next}>Right</button>
    </div>
  )}
  renderPagination={(props) => (
    <div class="dots">
      <For each={new Array(props.total)}>
        {(_, i) => (
          <button 
            class={props.currentIndex === i() ? 'active' : ''} 
            onClick={() => props.goTo(i())} 
          />
        )}
      </For>
    </div>
  )}
>
  <div>Slide 1</div>
  <div>Slide 2</div>
</Pagiflow>

Options usage

Solid props are reactive. Updating a prop will automatically call setOptions.

Reactive Props
import { createSignal } from 'solid-js';

const [items, setItems] = createSignal(1);

<Pagiflow itemsPerSlide={items()} gap={12} loop>
  {/* slides */}
</Pagiflow>

<button onClick={() => setItems(2)}>Show 2 Items</button>

Thumbnail Navigation

Show thumbnail strip that syncs with the main slider.

Thumbnails bottom
<Pagiflow
  loop
  thumbnails={{
    enabled: true,
    position: 'bottom',
    thumbWidth: 100,
    gap: 8
  }}
>
  <img src="/1.jpg" />
  <img src="/2.jpg" />
</Pagiflow>

Slider Sync

Connect two slider instances together.

Synchronized Sliders
<Pagiflow id="main-slider" loop>...</Pagiflow>

<Pagiflow sync="#main-slider" itemsPerSlide={4} loop>...</Pagiflow>

Responsive Breakpoints

Customize slider behavior across screen sizes.

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

Methods

Use controller methods directly from createPagiflow, and access raw instance methods via instance().

.ref(el)
createPagiflow controller ref callback. Attach with ref={slider.ref} to initialize the slider on that element.
.currentIndex()
Reactive signal from createPagiflow that returns the current active slide index.
.instance()
Returns the raw PagiflowInstance (or null before mount) for full low-level access.
element.pagiflowInstance
When using the declarative <Pagiflow> component, you can retrieve the raw instance directly from the DOM element (e.g., document.getElementById('id').pagiflowInstance).
.next()
Go to the next slide.
.prev()
Go to the previous slide.
.goTo(index, options?)
Jump to slide by zero-based index. Options: { silent?: boolean; instant?: boolean }.
.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. No argument returns current HTML; passing content updates and rebuilds; passing 'dom' returns slide elements.
.onSlideChange(callback)
Subscribe to active index changes directly on the raw instance.
.destroy()
Destroy the current slider instance and remove listeners/behaviors.

Solid vs React Usage

Migrating from React carousel code? The Solid API is nearly identical, with Solid reactivity patterns.

Quick Migration Notes
  • Install once: npm i pagiflow, then import from pagiflow/solid.
  • Use <Pagiflow /> for drop-in UI, or createPagiflow() for headless control.
  • Replace React state hooks with Solid signals for options and UI.
  • Use renderNav and renderPagination for custom controls without extra wrappers.
  • Use onSlideChange to sync analytics, captions, or external UI state.

Component Props (Solid-Specific)

Props supported by <Pagiflow /> in addition to all core options.

Prop Type Default Description
children JSX.Element - Slide content rendered inside the track.
class string undefined Extra CSS class on the root track element.
style string|CSSProperties undefined Inline style for the root track element.
id string undefined ID attribute for the root track element.
onSlideChange (index: number) => void undefined Called with the active real index (0-based) on slide change.
renderNav function undefined Custom navigation renderer. Receives { next, prev, currentIndex, instance }.
renderPagination function undefined Custom pagination renderer. Receives { goTo, currentIndex, total, instance }.

Solid Best Practices

Recommended patterns for performance, accessibility, and maintainable slider code in SolidJS apps.

Production Guidelines
  • Keep slides as direct children of <Pagiflow /> for predictable indexing.
  • Prefer numeric values for itemsPerSlide, gap, and speed to avoid layout ambiguity.
  • Use responsive to control mobile-first behavior instead of custom resize logic.
  • Enable keyboard for better accessibility on content-heavy pages.
  • Use lazyLoad with image slides to reduce LCP impact and bandwidth.
  • Use createPagiflow when you need full custom markup or advanced integration with external controls.

Events

Listen for changes with the onSlideChange prop.

onSlideChange callback
<Pagiflow onSlideChange={(index) => console.log('Current:', index)}>
  <div>Slide 1</div>
  <div>Slide 2</div>
</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 content during initialization.

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

Frequently Asked Questions

Common questions about pagiflow/solid.

pagiflow/solid is designed as a zero-dependency Solid slider with component and primitive APIs, responsive options, autoplay, sync, thumbnails, and runtime option updates.
Use createPagiflow for headless control, attach ref={slider.ref}, and render your own buttons, indicators, or progress UI using controller methods like next, prev, and goTo.
Yes. Most options stay the same. Move your import to pagiflow/solid, keep slider options, then adapt UI state to Solid signals and render props.
Use the responsive option with breakpoint keys and per-breakpoint settings such as itemsPerSlide, gap, and navigation behavior.
Run npm i pagiflow, then import from pagiflow/solid.
In createPagiflow, use slider.instance(). In the component, the instance is passed to render props.