Prerequisites

  • You've Installed the Slider Module
  • You've added Slides in the Admin

Introduction

Our Slider Module allows you to add images/content to Slides within the Admin, which can then be outputted as List Views either using our pre-built layouts or creating your own! We've chosen to use GlideJS for our layouts, but you can use any plugin you prefer.

Once you've installed the Slider Module on your Site, you'll be able to find Sliders in the left-hand menu under Modules/Slider. For a recap of how to install Modules on a Site, see here.

Syntax

{%- include 'module', id: '4', layout: 'default', per_page: '20', show_pagination: 'false', sort_type: 'properties.name', sort_order: 'asc' -%}

Parameters

id - the Module's ID

item_ids - output one or more module items, comma seperated
category_ids - output all items in one or more categories, comma seperated
layout - default is /default/ - 'layout' values are relative to the folder: layouts/modules/Slider(module_4)/[layout name]

per_page - defines the number of items outputted on the page
sort_type - defines the type by which items are ordered
properties.name - name of the Module item (alphabetical)
created_at - date the Module item was created
updated_at - date the Module item was last edited
properties.weighting - weighting of the Module item
sort_order - defines the order in which the type is sorted
asc - sort items in ascending order
desc - sort items in descending order
show_pagination - this should be false


Liquid Tags

Field Name: Item Name
Liquid Tag: {{ this['name'] }}
Description: name of the Slide

Field Name: Weighting
Liquid Tag: {{ this['weighting'] }}
Description: weight of item, used for sorting

Field Name: Release Date
Liquid Tag: {{ this['release_date'] }}
Description: release date of the item

Field Name: Expiry Date
Liquid Tag: {{ this['expiry_date'] }}
Description: expiry date of the item

Field Name: Enabled
Liquid Tag: {{ this['enabled'] }}
Description: enable/disable the item

Field Name: Title
Liquid Tag: {{ this['title'] }}
Description: title of the Slide

Field Name: Subtitle
Liquid Tag: {{ this['subtitle'] }}
Description: subtitle of the Slide

Field Name: Description
Liquid Tag: {{ this['description'] }}
Description: list description of the Blog Post

Field Name: Button Name
Liquid Tag: {{ this['button name'] }}
Description: list button name

Field Name: Button Link
Liquid Tag: {{ this['button link'] }}
Description: list button link

Layouts

You can find all our Slider Layouts on Layout Libary, to copy these onto your Site first create a folder in Code Editor, learn more here. Make sure your new Slider Layout has a List View folder within it, should look like this:

Now copy the item/wrapper code into the List folder. Make sure to specify the Layout name when including the Module.

GlideJS

We've chosen to build our Layouts using the GlideJS Slider plugin, if you would like to customize our layouts further we'd recommend reading GlideJS' Documentation. There are loads of different ways to build the Sliders- simply choose which type you suits you!

Did this answer your question?