SwiperFactory

import {
    generateSwiperHtml,
    generateSwiperDom,
    convertToSwiperDom,
    clearSwiper,
    generateSwiperSlidesHtml,
    generateSwiperSlidesDom,
    generateSwiperSlideHtml,
    generateSwiperSlideDom,
    generateSwiperPaginationHtml,
    generateSwiperPaginationDom,
    generateSwiperButtonsHtml,
    generateSwiperButtonsDom,
    generateSwiperScrollbarHtml,
    generateSwiperScrollbarDom,
} from '@bbc/front-end-kit/js/factories/SwiperFactory';

A collection of factory functions for generating Swiper.js HTML strings and DOM elements. All functions are named exports — there is no default export.

Getting started

Generate HTML string

import { generateSwiperHtml } from '@bbc/front-end-kit/js/factories/SwiperFactory';

const html = generateSwiperHtml({
    pagination: true,
    buttons: { icons: { prev: 'arrow-left', next: 'arrow-right' } },
    scrollbar: true,
});
document.querySelector('.my-container').innerHTML = html;

Generate DOM element with slide content

import { generateSwiperDom } from '@bbc/front-end-kit/js/factories/SwiperFactory';

const $swiper = generateSwiperDom({
    items: [document.querySelector('.slide-1'), document.querySelector('.slide-2')],
    pagination: true,
});
document.body.appendChild($swiper);

Convert an existing element's children into a Swiper

import { convertToSwiperDom } from '@bbc/front-end-kit/js/factories/SwiperFactory';

const $list = document.querySelector('.my-list');
// All children of $list become swiper slides; the swiper is appended inside $list
const $swiper = convertToSwiperDom($list, { pagination: true });

Undo a Swiper (restore children to parent)

import { clearSwiper } from '@bbc/front-end-kit/js/factories/SwiperFactory';

clearSwiper(document.querySelector('.my-list'));

API

Core factory functions

generateSwiperHtml(args = {})

Returns an HTML string for a complete Swiper structure.

Parameters

• items (string[], optional): Slide content as HTML strings. Generates <div class="swiper-slide swiper__slide"> for each.
• pagination (any truthy, optional): Appends a <div class="swiper-pagination swiper__pagination"> element.
• buttons (object, optional): Appends prev/next button markup. Accepts icons.prev and icons.next (icon class suffixes, defaults 'chevron-left' / 'chevron-right').
• scrollbar (any truthy, optional): Appends a <div class="swiper-scrollbar swiper__scrollbar"> element.

Returns

string — trimmed HTML string.

generateSwiperDom(args = {})

Same as generateSwiperHtml but returns a DOM Element. Slides are expected to be DOM Elements (strings are also accepted).

Parameters

• items (Element[]|string[], optional): Slide content. Elements are appended directly; strings are inserted via strToDom.
• All other args from generateSwiperHtml (except items) are forwarded for partial HTML.

Returns

Element — the root .swiper element.

convertToSwiperDom($el, args = {})

Treats all current children of $el as slide items, wraps them in a Swiper, and appends the Swiper inside $el.

Parameters

• $el (Element): The container whose children become slides.
• args (object, optional): Same options as generateSwiperDom (except items, which is derived from $el.children).

Returns

Element — the .swiper element appended inside $el.

clearSwiper($el)

Removes a Swiper from the DOM and restores all slide children to the Swiper's parent element.

Parameters

• $el (Element): Either the .swiper element itself, or its parent — the function queries for .swiper if the element doesn't have the swiper class.

Returns

undefined

Slide factories

generateSwiperSlidesHtml(args = {})

Returns an array of slide HTML strings from an array of content strings.

• items (string[]): Slide content as HTML strings.

Returns

string[]

generateSwiperSlidesDom(args = {})

Returns an array of slide DOM Elements from an array of content Elements.

• items (Element[]): Slide content as DOM elements.

Returns

Element[]

generateSwiperSlideHtml(args = {})

Returns HTML for a single slide.

• content (string, optional): Inner HTML for the slide.

Returns

string

generateSwiperSlideDom(args = {})

Returns a DOM Element for a single slide. Appends content as a child node.

• content (Element): The element to append inside the slide.

Returns

Element

Part factories

generateSwiperPaginationHtml(args = {}) / generateSwiperPaginationDom(args = {})

Generate a <div class="swiper-pagination swiper__pagination"> as an HTML string or DOM Element.

generateSwiperButtonsHtml(args = {}) / generateSwiperButtonsDom(args = {})

Generate prev/next button markup. Accepts args.icons.prev and args.icons.next (icon class suffixes, defaults 'chevron-left' / 'chevron-right').

generateSwiperScrollbarHtml(args = {}) / generateSwiperScrollbarDom(args = {})

Generate a <div class="swiper-scrollbar swiper__scrollbar"> as an HTML string or DOM Element.

CSS classes

External dependencies

• strToDom — from js/utils/dom: converts HTML strings to DOM elements.
• Swiper.js: This factory generates the HTML structure Swiper expects. You still need to instantiate new Swiper(...) yourself with the appropriate configuration.