mayupat13/october-cms-slick-slider

Easily create responsive slide shows from the backend and insert them as a component. Supports multiple rows, multiple images per slide, and responsive breakpoints. Built using Ken Wheeler's Slick Slider (http://kenwheeler.github.io/slick/)

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 slide show.

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 "Slide Shows" from the main menu. Choose "Create" and then choose a title for the slide show 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 slide show, but does not have permissions to set slide show specific settings. This allows an administrator to pre-configure settings so users can create slide shows, but not modify the settings of the slide shows. 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 slide shows. Create, delete, and modify slide shows and update slide show settings.

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

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

Component

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

Components can also be added to a page with {% component 'slider' slide_show_id = id %} by replacing the "id" with our slide show 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/