Swiper Configuration

Note

The Swiper render logic has been updated. All Swiper render components should now use the render_swiper_settings() utility function for consistent data attribute output.

Swiper Component

The Swiper Component allows users to create customizable Swiper sliders in WordPress blocks with options for autoplay, navigation, pagination, and more.

---

Import Information

JavaScript Import

import {
    SwiperSettings,
    defaultSwiperAttributes,
} from '@utilities/swiper/swiper-settings';

import { useEffect } from '@wordpress/element';
import { v4 as uuidv4 } from 'uuid';

attributes: {
    uuid: {
        type: 'string',
        default: '',
    },
    ...defaultSwiperAttributes,
    // Other attributes...
},

useEffect(() => {
    if (!attributes.uuid) {
        setAttributes({ uuid: uuidv4() });
    }
}, []);

<SwiperSettings
    title="Hero Slider Settings"
    attributes={attributes}
    setAttributes={setAttributes}
/>

PHP Import

use basetheme\Utilities\Swiper_Utils;

Swiper_Utils::init_swiper($attributes);

<section data-swiper <?php echo Swiper_Utils::render_swiper_settings($attributes); ?>>
    ...
</section>

---

Default Attributes

The defaultSwiperAttributes object defines the default attributes used by the Swiper component in the editor.

export const defaultSwiperAttributes = {
    loop: { type: 'boolean', default: true },
    autoplay: { type: 'boolean', default: true },
    autoplaySpeed: { type: 'number', default: 3000 },
    pagination: { type: 'boolean', default: true },
    navigation: { type: 'boolean', default: true },
    slidesPerView: { type: 'number', default: 1 },
    spaceBetween: { type: 'number', default: 0 },
    effect: { type: 'string', default: 'slide' },
    infiniteLoop: { type: 'boolean', default: false },
};

---

SwiperSettings Component

The SwiperSettings component provides a UI in the editor sidebar for configuring Swiper slider settings.

export function SwiperSettings({ title, attributes, setAttributes }) {
    return (
        <PanelBody title={title}>
            <PanelRow>
                <ToggleControl
                    label="Loop"
                    checked={attributes.loop}
                    onChange={(loop) => setAttributes({ loop })}
                />
            </PanelRow>
            <PanelRow>
                <ToggleControl
                    label="Infinity Loop"
                    checked={attributes.infiniteLoop}
                    onChange={(infiniteLoop) => setAttributes({ infiniteLoop })}
                />
            </PanelRow>
            <PanelRow>
                <ToggleControl
                    label="Autoplay"
                    checked={attributes.autoplay}
                    onChange={(autoplay) => setAttributes({ autoplay })}
                />
            </PanelRow>
            <PanelRow>
                <TextControl
                    label="Autoplay Speed"
                    value={attributes.autoplaySpeed}
                    onChange={(autoplaySpeed) =>
                        setAttributes({
                            autoplaySpeed: parseInt(autoplaySpeed, 10) || 0,
                        })
                    }
                />
            </PanelRow>
            <PanelRow>
                <ToggleControl
                    label="Pagination"
                    checked={attributes.pagination}
                    onChange={(pagination) => setAttributes({ pagination })}
                />
            </PanelRow>
            <PanelRow>
                <ToggleControl
                    label="Navigation"
                    checked={attributes.navigation}
                    onChange={(navigation) => setAttributes({ navigation })}
                />
            </PanelRow>
            <PanelRow>
                <TextControl
                    label="Slides Per View"
                    value={attributes.slidesPerView}
                    onChange={(slidesPerView) =>
                        setAttributes({
                            slidesPerView: parseInt(slidesPerView, 10) || 1,
                        })
                    }
                />
            </PanelRow>
            <PanelRow>
                <TextControl
                    label="Space Between"
                    value={attributes.spaceBetween}
                    onChange={(spaceBetween) =>
                        setAttributes({
                            spaceBetween: parseInt(spaceBetween, 10) || 0,
                        })
                    }
                />
            </PanelRow>
            <PanelRow>
                <SelectControl
                    label="Effect"
                    value={attributes.effect}
                    options={[
                        { value: 'slide', label: 'Slide' },
                        { value: 'fade', label: 'Fade' },
                    ]}
                    onChange={(effect) => setAttributes({ effect })}
                />
            </PanelRow>
        </PanelBody>
    );
}

---

Swiper Utilities

The Swiper_Utils class standardizes Swiper slider settings for WordPress themes, ensuring consistent configurations between JavaScript and PHP.

---

Class Definition

namespace basetheme\Utilities;

class Swiper_Utils
{
    public static function init_swiper(&$attributes)
    {
        if (!isset($attributes['loop'])) {
            $attributes['loop'] = 'true';
        }
        if (!isset($attributes['autoplay'])) {
            $attributes['autoplay'] = 'true';
        }
        if (!isset($attributes['autoplaySpeed'])) {
            $attributes['autoplaySpeed'] = 3000;
        }
        if (!isset($attributes['pagination'])) {
            $attributes['pagination'] = 'true';
        }
        if (!isset($attributes['navigation'])) {
            $attributes['navigation'] = 'true';
        }
        if (!isset($attributes['effect'])) {
            $attributes['effect'] = 'slide';
        }
        if (!isset($attributes['spaceBetween'])) {
            $attributes['spaceBetween'] = 0;
        }
        if (!isset($attributes['slidesPerView'])) {
            $attributes['slidesPerView'] = 1;
        }
        if (!isset($attributes['infiniteLoop'])) {
            $attributes['infiniteLoop'] = 'false';
        }
        if ($attributes['infiniteLoop'] !== 'false') {
            $attributes['infiniteLoop'] = 'true';
        }
    }

    public static function render_swiper_settings(array $attributes): string
    {
        $settings = [
            'swiper-id' => $attributes['uuid'],
            'swiper-loop' => $attributes['loop'],
            'swiper-set-autoplay' => $attributes['autoplay'],
            'swiper-autoplay' => $attributes['autoplaySpeed'],
            'swiper-pagination' => $attributes['pagination'],
            'swiper-navigation' => $attributes['navigation'],
            'swiper-effect' => $attributes['effect'],
            'swiper-space-between' => $attributes['spaceBetween'],
            'swiper-slides-per-view' => $attributes['slidesPerView'],
            'swiper-infiniteloop' => $attributes['infiniteLoop'],
        ];

        return implode(' ', array_map(
            fn ($key, $value) => sprintf('data-%s="%s"', $key, $value),
            array_keys($settings),
            $settings
        ));
    }
}

---

Example Usage

JavaScript

Use the SwiperSettings component in your block editor:

<SwiperSettings
    title="Swiper Settings"
    attributes={attributes}
    setAttributes={setAttributes}
/>

PHP

Use the utility in your PHP template:

use basetheme\Utilities\Swiper_Utils;

$attributes = [
    'autoplay' => true,
    'slidesPerView' => 3,
];

Swiper_Utils::init_swiper($attributes);

<section data-swiper <?php echo Swiper_Utils::render_swiper_settings($attributes); ?>>
    <!-- Swiper content -->
</section>

---

Conclusion

The Swiper Component and Swiper Utilities provide a flexible and consistent solution for managing Swiper sliders in both the WordPress editor and frontend themes.