ProcessSlider by mauricius

Easily insert Jssor Sliders in your ProcessWire content

WARNING: This repository is no longer maintained

This repository will not be updated. The repository will be kept available in read-only mode.

ProcessSlider module

An Image Slider builder for the ProcessWire CMS/CMF.

This module installs a new Admin page that lets you create multiple image sliders to embed on the site. In short it is a builder for the Jssor Slider plugin. This module is composed by three different Modules:

  • ProcessSlider The main module. It adds a new page, called Process Slider, under the Setup menu that allows the creation of multiple sliders. Each slider is stored in the table slider, created during the installation process.
  • FieldtypeSlider/InputSlider This module creates a new field in ProcessWire that lets you select a slider to embed inside a page.
  • MarkupSlider This module translates the slider code into Jssor compatible markup and optionally generates the initialization script.

Important: the module is in early alpha stage.



  • Custom slider size
  • Drag and Drop interface
  • Move and resize elements
  • Slides background with images from existing PW pages
  • Slider Preview (with the provided MarkupSlider module)
  • Predefined or custom style classes for elements
  • Add or remove slides
  • Add or remove elements
  • Change slides order visually
  • Jssor skins and bullets support
  • Visual Timeline
  • Optional responsive/fullwidth slider
  • Predefined elements: Images, Text, Links, Image as link, Div blocks, Youtube Videos
  • Animation Options (for In and Out): animation type, delay, duration
  • Notification messages

Demo Screencast


  1. Place the module files in /site/modules/ProcessSlider/
  2. In admin, click Modules > Check for new Modules
  3. Click "Install" for ProcessSlider
  4. Click "Install" for FieldtypeSlider. The module will install also InputfieldSlider.
  5. Click "Install" for MarkupSlider.
  6. Create a new folder in /site/modules/ProcessSlider/ and call it jssor. Download the Jssor library from and place the content of the ZIP file in it. The module uses only the files in the js folder.
  7. Now go to Setup > Fields and create a new Slider field. Add it to your template.
  8. Now go to Setup > Process Slider and start create your image Sliders.
  9. Finally you can add your slider to the page.


The modules provide some space for customization.


After installing this module, you can specify a CSS file for styling the slider elements. The default file is process-slider-items.css and is located in the /site/modules/ProcessSlider/builder/css folder. If you prefer to use your file you have to add also the class names to the Custom Classes textarea, otherwise they will not be available in the builder.


The MarkupSlider module has itself a few configuration option. The most important is the custom CSS file for styling the elements. Obviously the file has to be the same defined in the ProcessSlider module above. You can also choose to enable the cache for markup and javascript codes generated by the module. Finally the Development Mode options sets the module to use the non-minified and non-combined version of Jssor.

Since Jssor doesn't include single CSS files for all the Arrows and Bullets styles, I made them available in the folder /site/ProcessSlider/builder/css/.

Important: Jssor comes in two versions: vanilla JavaScript and jQuery. The module uses the first one.

API (MarkupSlider)

In your template you can instantiate the module like the following:

$slider = $modules->get('MarkupSlider');

Insert the stylesheets in <head>:

echo $slider->getStyles($arrows = false, $bullets = false);

if your slider uses arrows or bullets, set to true the corresponding boolean.

Output the slider:

echo $slider->render($page->get('slider'), $includeScript = true, $options = array())

This function inserts, in sequential order, the following elements:

  • the Jssor library from the ProcessSlider/jssor/js folder
  • the transitions (_caption_transitions.js)
  • the slider markup
  • the initialization script

You can provide some options as third parameter. In fact $options is an array that overrides some of the Jssor options defined in the admin page when including the initialization script.

The options available for this parameter are:

  • AutoPlay
  • AutoPlayInterval
  • PauseOnHover
  • ArrowKeyNavigation
  • SlideEasing
  • SlideDuration
  • Transitions : comma-separated string of Jssor slide transitions
  • TransitionsOrder
  • ArrowChanceToShow
  • ArrowAutoCenter
  • BulletChanceToShow
  • BulletAutoCenter
  • SpacingX
  • SpacingY

Otherwise if you prefer to provide a personal initialization script you can set $includeScript to false and ignore the third parameter.

Browser Support

The ProcessSlider module doesn't support IE < 9.

Future Plans

Things I want to implement in the following versions:

  • Save and restore unsaved data from localStorage
  • Implement item and slide cloning
  • Expand configurable options
  • Drop jQuery for resize and drag&drop features


I would like to thank the entire ProcessWire community and in particular Ryan Cramer for his amazing work. Also part of this module is based on his Hanna Code module.


Licenced under MIT. See LICENSE.

Have fun with the code.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • This week ProcessWire 3.0.214 is on the dev branch. Relative to 3.0.213 this version has 16 new commits which include the addition of 3 new pull requests, 6 issue fixes, a new WireNumberTools utility class, and various other improvements. More
    17 March 2023
  • ProcessWire 3.0.213 core updates: This week we’ll look at the new WireSitemapXML module, a new WireNumberTools core class, and a new ability for Fieldtype modules to specify useful ready-to-use configurations when creating new fields. More
    24 February 2023
  • ProcessWire 3.0.212 core updates— More
    17 February 2023

Latest news

  • ProcessWire Weekly #463
    In the 463rd issue of ProcessWire Weekly brings we'll check out the latest weekly update from Ryan, some weekly forum and online highlights, and more. Read on! / 26 March 2023
  • ProcessWire 3.0.213 core updates
    This week we’ll look at the new WireSitemapXML module, a new WireNumberTools core class, and a new ability for Fieldtype modules to specify useful ready-to-use configurations when creating new fields.
    Blog / 24 February 2023
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer