Skip to content

Slider Plugin

The Slider plugin adds a dynamic, interactive content carousel to your website. It is highly customizable, allowing you to create beautiful hero sections for your homepage or other pages.

General Settings

The slider's behavior can be globally configured from the settings panel:

Display & Location

  • Render Hook: Choose where the slider appears (e.g., HOME TOP or PAGE TOP).
  • Homepage Only: Option to limit the slider visibility strictly to the homepage.

Transitions & Behavior

  • Auto Slide: Enable automatic slide transitions with a customizable Interval (milliseconds).
  • Pause On Hover: Temporarily stop auto-sliding when a user hovers over the slider.
  • Transition Effects: Switch between Slide or Fade animations.
  • Looping: Use the Wrap settings to enable infinite slide cycling.

Visual Controls

  • Indicators & Controls: Toggle the visibility of navigation dots (indicators) and previous/next arrows.
  • Caption Styles: Choose from SOLID, GLASS, or GRADIENT caption backgrounds.
  • Transparency & Blur: Adjust the caption opacity and background blur (for Glass effect).
  • Typography: Custom colors for titles and subtitles, and select the appropriate SEO heading tag (H1H6).

Slider Items

Each slide in the carousel can be individually managed with the following fields:

  • Image: High-quality image upload (supports PNG, JPEG, GIF, WEBP up to 5MB).
  • Title & Subtitle: Text content displayed on top of the image.
  • Link URL: Turn the slide into a clickable call-to-action.
  • New Tab: Control whether links open in the same page or a new browser tab.
  • Drag-and-Drop Order: Easily reorder slides by dragging rows in the management table.

Required Permission

To manage the slider, users must have the following permission: pano.plugin.pano-plugin-slider.manage.slider

Open Source

This plugin is open source and licensed under GPLv3. You can access the source code on GitHub:

Setup

  1. Enable the plugin in the Pano Admin Panel.
  2. Navigate to Panel → View → Slider.
  3. Configure your General Settings first.
  4. Add your Slider Items and drag them into your preferred order!