Instructions

README

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.

Demo Screencast

Installation

Click "Install" for FieldtypeSlider. The module will install also InputfieldSlider.

Click "Install" for MarkupSlider.

Create a new folder in /site/modules/ProcessSlider/ and call it jssor. Download the Jssor library from http://jssor.com/download.html and place the content of the ZIP file in it. The module uses only the files in the js folder.

Now go to Setup > Fields and create a new Slider field. Add it to your template.

Now go to Setup > Process Slider and start create your image Sliders.

Finally you can add your slider to the page.

Configuration

The modules provide some space for customization.

ProcessSlider

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.

MarkupSlider

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.