LW Slider

Lightweight responsive slider for WordPress. Powered by Splide.js.

Overview


Requires WordPress	6.0+
Requires PHP	8.2+
Tested up to	6.7
License	GPL-2.0-or-later
GitHub	lwplugins/lw-slider

Installation


composer require lwplugins/lw-slider

Or upload the lw-slider folder to /wp-content/plugins/ and activate through the Plugins menu.

Features

Custom Post Type based slider management
Drag & drop slide ordering
Background image or color per slide
Content overlay with headline, subheadline, description
Call-to-action: full slide link or button
Splide.js powered - lightweight and accessible (~30KB)
Responsive: separate mobile/desktop min-height
Autoplay, loop, fade/slide transitions
Keyboard navigation and swipe support
Accessibility: prefers-reduced-motion support
Duplicate slider with one click
Hide on mobile option
Gutenberg block with slider selector and per-block override settings
No bloat, no upsell, no tracking

Shortcodes

Shortcode	Description
`[lw_slider id="123"]`	Display a slider by its post ID

You can also use the LW Slider Gutenberg block for a visual editing experience with per-block override settings.

Settings

Manage sliders under LW Plugins > Sliders. Each slider is a custom post type with:

Drag & drop slide ordering
Per-slide settings: background image/color, content overlay, CTA
Slider settings: autoplay, loop, transition type, min-height (mobile/desktop)

AI Abilities

When used with LW Site Manager, the following abilities are available for AI agents. All abilities are registered under the slider category and require manage_options capability.

`lw-slider/list-sliders` (readonly)

List all sliders registered on the site.

Input: none (empty object)

Output:


{
  "success": true,
  "sliders": [
    {
      "id": 42,
      "title": "Hero Slider",
      "status": "publish",
      "slide_count": 3,
      "shortcode": "[lw_slider id=\"42\"]"
    }
  ]
}

Field	Type	Description
`id`	integer	Slider post ID
`title`	string	Slider title
`status`	string	Post status (`publish` or `draft`)
`slide_count`	integer	Number of slides in this slider
`shortcode`	string	Ready-to-use shortcode

`lw-slider/get-slider` (readonly)

Get full details for a single slider including all slides and settings.

Input:

Field	Type	Required	Description
`id`	integer	yes	Slider post ID

Output:


{
  "success": true,
  "slider": {
    "id": 42,
    "title": "Hero Slider",
    "status": "publish",
    "settings": {
      "min_height_desktop": "400",
      "min_height_mobile": "280",
      "dots": true,
      "arrows": true,
      "arrows_mobile": false,
      "autoplay": false,
      "autoplay_delay": 5000,
      "transition": "slide",
      "loop": true,
      "content_align_h": "center",
      "content_align_v": "center",
      "use_default_styles": true,
      "custom_class": "",
      "swipe": true,
      "keyboard": true,
      "pause_on_hover": false,
      "hide_on_mobile": false
    },
    "slides": [
      {
        "title": "",
        "active": true,
        "bg_type": "image",
        "bg_image_id": 123,
        "bg_color": "#f0f0f0",
        "bg_position": "center center",
        "overlay_color": "",
        "overlay_opacity": 50,
        "headline": "Welcome",
        "subheadline": "Subtitle here",
        "description": "",
        "link_url": "https://example.com",
        "link_target": "_self",
        "cta_mode": "full_slide",
        "button_text": "",
        "image_alt": ""
      }
    ]
  }
}

Slider Settings Fields:

Field	Type	Default	Description
`min_height_desktop`	string	`"400"`	Minimum height in px on desktop
`min_height_mobile`	string	`"280"`	Minimum height in px on mobile
`dots`	boolean	`true`	Show navigation dots
`arrows`	boolean	`true`	Show navigation arrows on desktop
`arrows_mobile`	boolean	`false`	Show navigation arrows on mobile
`autoplay`	boolean	`false`	Enable autoplay
`autoplay_delay`	integer	`5000`	Autoplay delay in milliseconds (1000-30000)
`transition`	string	`"slide"`	Transition type: `slide` or `fade`
`loop`	boolean	`true`	Loop slides infinitely
`content_align_h`	string	`"center"`	Horizontal content alignment: `left`, `center`, `right`
`content_align_v`	string	`"center"`	Vertical content alignment: `top`, `center`, `bottom`
`use_default_styles`	boolean	`true`	Include bundled frontend CSS
`custom_class`	string	`""`	Additional CSS class for the slider wrapper
`swipe`	boolean	`true`	Enable touch/swipe navigation
`keyboard`	boolean	`true`	Enable keyboard navigation
`pause_on_hover`	boolean	`false`	Pause autoplay on mouse hover
`hide_on_mobile`	boolean	`false`	Hide the slider on mobile devices

Slide Fields:

Field	Type	Description
`title`	string	Internal slide label (not displayed)
`active`	boolean	Whether the slide is visible
`bg_type`	string	Background type: `image` or `color`
`bg_image_id`	integer	Attachment ID for background image
`bg_color`	string	Hex color for solid background
`bg_position`	string	CSS background-position value
`overlay_color`	string	Hex color for overlay (empty = none)
`overlay_opacity`	integer	Overlay opacity 0-100
`headline`	string	Main headline text
`subheadline`	string	Secondary headline text
`description`	string	Body paragraph text
`link_url`	string	URL for slide link or button
`link_target`	string	Link target: `_self` or `_blank`
`cta_mode`	string	CTA behavior: `full_slide` or `button`
`button_text`	string	Button label (used when `cta_mode` is `button`)
`image_alt`	string	Alt text for the background image

Error Responses

Code	HTTP Status	Description
`missing_id`	400	The `id` parameter was not provided
`not_found`	404	No slider exists with the given ID

FAQ

How do I display a slider?

Use the shortcode [lw_slider id="123"] or the Gutenberg block.

What JavaScript library is used?

Splide.js - a lightweight, accessible slider library (~30KB).