JavaScript API
Programmatic control of SwiperFlow sliders
SwiperFlow exposes a global API at window.swiperflow for programmatic control.
Global Object
window.swiperflowThe SwiperFlow API is available after the page loads. It provides access to all slider instances and event handling.
Properties
sliders
Get all active SwiperFlow instances.
const allSliders = window.swiperflow.sliders;
// Returns: SwiperInstance[]Each instance contains:
component— The DOM element withdata-swf-componentconfig— The parsed configuration objectgetSwiperInstance— The underlying Swiper.js instance
breakpoint
Get the current active breakpoint.
const currentBreakpoint = window.swiperflow.breakpoint;
// Returns: 'desktop' | 'tablet' | 'mobile'Methods
find(query)
Find a specific slider by its component name.
const slider = window.swiperflow.find('hero-slider');Parameters:
query(string) — The value ofdata-swf-component
Returns: SwiperInstance | undefined
Example:
<div data-swf-component="hero-slider">
...
</div>const hero = window.swiperflow.find('hero-slider');
if (hero) {
// Access the Swiper instance
hero.getSwiperInstance.slideNext();
}init()
Manually reinitialize all sliders. Useful after DOM changes.
window.swiperflow.init();This destroys all existing instances and creates new ones based on the current DOM.
Use cases:
- After dynamically adding/removing slides
- After AJAX content loads
- After showing/hiding slider containers
on(event, callback)
Subscribe to SwiperFlow events.
window.swiperflow.on('swfLoaded', (detail) => {
console.log('All sliders loaded:', detail.sliders);
});Parameters:
event(string) — Event namecallback(function) — Handler function receiving event detail
Events
swfLoaded
Fired when all sliders have been initialized.
window.swiperflow.on('swfLoaded', (detail) => {
console.log('Sliders:', detail.sliders);
console.log('Timestamp:', detail.timestamp);
});Detail object:
sliders— Array of all SwiperInstance objectstimestamp— Unix timestamp of initialization
swfResize
Fired when the window is resized and sliders are reinitialized.
window.swiperflow.on('swfResize', (detail) => {
console.log('Resized at breakpoint:', detail.activeBreakpoint);
});Detail object:
sliders— Array of all SwiperInstance objectstimestamp— Unix timestampactiveBreakpoint— Current breakpoint ('desktop', 'tablet', or 'mobile')
swfBreakpointChange
Fired when the viewport crosses a breakpoint boundary.
window.swiperflow.on('swfBreakpointChange', (detail) => {
console.log('Changed from', detail.previous, 'to', detail.current);
});Detail object:
previous— Previous breakpointcurrent— New breakpointwidth— Current window width
Listening via Window Events
Events are also dispatched on the window object as CustomEvents:
window.addEventListener('swfLoaded', (event) => {
console.log('Loaded:', event.detail);
});
window.addEventListener('swfBreakpointChange', (event) => {
console.log('Breakpoint changed:', event.detail);
});Accessing Swiper.js Instance
Each SwiperFlow instance wraps a Swiper.js instance. Access it for advanced control:
const slider = window.swiperflow.find('my-slider');
const swiper = slider.getSwiperInstance;
// Use Swiper.js methods
swiper.slideNext();
swiper.slidePrev();
swiper.slideTo(3);
swiper.update();
// Access Swiper properties
console.log(swiper.activeIndex);
console.log(swiper.isBeginning);
console.log(swiper.isEnd);See the Swiper.js API documentation for all available methods and properties.
Examples
Custom Navigation Buttons
document.querySelector('.custom-next').addEventListener('click', () => {
const slider = window.swiperflow.find('product-slider');
slider.getSwiperInstance.slideNext();
});
document.querySelector('.custom-prev').addEventListener('click', () => {
const slider = window.swiperflow.find('product-slider');
slider.getSwiperInstance.slidePrev();
});Respond to Slide Changes
window.swiperflow.on('swfLoaded', ({ sliders }) => {
sliders.forEach(slider => {
slider.getSwiperInstance.on('slideChange', () => {
console.log('Slide changed to:', slider.getSwiperInstance.activeIndex);
});
});
});Pause Autoplay on Hover
window.swiperflow.on('swfLoaded', ({ sliders }) => {
sliders.forEach(slider => {
const swiper = slider.getSwiperInstance;
slider.component.addEventListener('mouseenter', () => {
if (swiper.autoplay) swiper.autoplay.stop();
});
slider.component.addEventListener('mouseleave', () => {
if (swiper.autoplay) swiper.autoplay.start();
});
});
});Update Slider After AJAX
async function loadMoreSlides() {
const response = await fetch('/api/slides');
const html = await response.text();
document.querySelector('[data-swf-element="list"]').innerHTML += html;
// Reinitialize to pick up new slides
window.swiperflow.init();
}Responsive Behavior
window.swiperflow.on('swfBreakpointChange', ({ current }) => {
if (current === 'mobile') {
// Mobile-specific behavior
document.body.classList.add('mobile-slider-active');
} else {
document.body.classList.remove('mobile-slider-active');
}
});TypeScript
SwiperFlow exports TypeScript types:
interface SwiperFlowAPI {
sliders: SwiperInstance[];
breakpoint: 'desktop' | 'tablet' | 'mobile';
find: (query: string) => SwiperInstance | undefined;
init: () => void;
on: (event: string, callback: (detail?: any) => void) => void;
}