Liyanit Responsive Slider

外掛說明

Liyanit Responsive Slider is built using WordPress coding standards and accessibility best practices. It provides administrators with a dedicated slider manager, drag-and-drop slide ordering, Media Library integration, shortcodes, and Gutenberg block support.

The plugin uses WordPress-native functionality and does not require jQuery or third-party frontend JavaScript libraries.

Key Features

• Object-Oriented Architecture: Clean autoloading and modular class structure using the Liyan_GS\ResponsiveSlider namespace.
• WordPress Native: Uses a Custom Post Type (liyan_gs_slider) and post meta without creating custom database tables.
• Drag-and-Drop Editor: Re-order slides easily from the WordPress Admin.
• Touch & Swipe Support: Modern vanilla JavaScript slider engine with no jQuery dependency on the frontend.
• Accessibility Features: Keyboard navigation, ARIA attributes, visible focus states, pause on hover/focus, and prefers-reduced-motion support.
• Conditional Assets: Loads frontend CSS and JavaScript only when a slider is rendered.
• Developer Hooks API: Provides action and filter hooks for custom extensions.
• Gutenberg Support: Insert and configure sliders directly from the WordPress Block Editor.
• Shortcode Support: Display sliders anywhere shortcodes are supported.
• Template Overrides: Customize slider markup from your active theme without modifying plugin files.

Shortcode Usage

Display any slider using:
[liyan_gs_slider id=”123″]

Supported Attributes

• id (int, required): Slider Post ID.
• autoplay (bool, optional): Override autoplay (true or false).
• speed (int, optional): Override transition speed in ms (e.g. 600).
• navigation (bool, optional): Show or hide arrow navigation (true or false).
• pagination (bool, optional): Show or hide pagination dots (true or false).
• slides_per_view (int, optional): Override the number of visible slides.
• space_between (int, optional): Override the spacing between slides in pixels.
• class (string, optional): Extra CSS class name for styling wrapper.

Example:
[liyan_gs_slider id=”123″ autoplay=”true” speed=”5000″ navigation=”true” pagination=”true” slides_per_view=”3″ space_between=”20″]

Developer Hooks API

Actions

• liyan_gs_slider_init: Fires on plugin initialization.
• liyan_gs_slider_before($slider_id, $settings): Fires before slider markup.
• liyan_gs_slider_after($slider_id, $settings): Fires after slider markup.
• liyan_gs_slider_before_slide($slide, $index): Fires before each slide item.
• liyan_gs_slider_after_slide($slide, $index): Fires after each slide item.

Filters

• liyan_gs_slider_settings($settings, $slider_id): Filter slider configuration.
• liyan_gs_slider_slides($slides, $slider_id): Filter array of Slide objects.
• liyan_gs_slider_slide_html($html, $slide, $index): Filter rendered HTML of an individual slide.
• liyan_gs_slider_image_attributes($attr, $slide): Filter image attributes (alt, loading, etc.).
• liyan_gs_slider_classes($classes, $slider_id, $settings): Filter slider container CSS classes.