About this plugin
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.