Notice

Looking for maintainers

October CMS Slick Slider Plugin

• Installation
• Dependencies
• Creating a Slider
• Settings
• Permissions
• Component
• Front-end Examples
• Built with Slick Slider

Installation

Create a folder named peterhegman in your /plugins directory. Drop slickslider into this folder. In your terminal run php artisan october:up Note: Make sure the plugin folder is named "slickslider"

The plugin can also be added to an October CMS project from the plugin repo: https://octobercms.com/plugin/peterhegman-slickslider

Dependencies

This plugin requires jQuery 1.7 +. By default the plugin includes jQuery 3.1.1, but if your theme already include jQuery you may want to turn it off in the settings tab of your slideshow.

This plugin also requires the theme layout being used to have the {%styles%} tag in the head section and the {%scripts%} tag right before closing body tag. See {%styles%} and {%scripts%} for more information.

Creating a Slider

After installation choose "Slideshows" from the main menu. Choose "Create" and then choose a title for the slideshow and add as many slides as you would like. Slides can be added, deleted, and rearranged. Slide description and title can also be added.

Settings

Slide show specific settings can be accessed from the "Settings" tab when creating a slider.

Global settings can be set in the October CMS backend Settings panel. These settings will only be used when a user creates a slideshow, but does not have permissions to set slideshow specific settings. This allows an administrator to pre-configure settings so users can create slideshows, but not modify the settings of the slideshows. See Permissions for more details.

A full list and description of settings can be found here: http://kenwheeler.github.io/slick/

Toggle Options Available

Other Options

Responsive Breakpoints

Permissions

Permissions available are as follows:

• peterhegman.slickslider.manage_slide_shows - User can manage all aspects of the slideshows. Create, delete, and modify slideshows and update slideshow settings.

• peterhegman.slickslider.manage_slides - User can only manage slides of already created slideshows. User can add, remove and re-arrange slides on a slideshow.

• peterhegman.slickslider.create_slide_shows - Allows user to create and delete slideshows.

Component

Slider component can be dragged into a page from the "CMS" tab. User can then choose what slideshow to display.

Components can also be added to a page with {% component 'slider' slide_show_id = id %} by replacing the "id" with our slideshow ID

Note: The [slider] tag must be in the head of the page for example:

title = "Slide show"
url = "/slide-show"
layout = "default"
is_hidden = 0

[slider]
==
{% component 'slider' slide_show_id = 2 %}

Front-end Examples

Full Width Image

Multiple Images

Grid Mode

Mobile

Built with Slick Slider

Huge thanks to Ken Wheeler for creating the incredible Slick Slider. Full documentation for slick slider can be found here: http://kenwheeler.github.io/slick/