website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
22min

Slider

Add images and content to your Slides in Admin and display on a Site either using our custom Layouts or creating your own

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.

Document image

Syntax

HTML
|

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
    • properties.release_date - date the item is set to be released
  • 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
  • uniq_slider_id - used when outputting multiple of the same layout on one page.

Liquid Tags

Field Name

Liquid Tag

Description

Item Name

{{ this['name'] }}

name of the Slide

Weighting

{{ this['weighting'] }} 

weight of item, used for sorting

Release Date

{{ this['release_date'] }} 

release date of the item

Expiry Date

{{ this['expiry_date'] }} 

expiry date of the item

Enabled

{{ this['enabled'] }} 

enable/disable the item

Title

{{ this['title'] }}

title of the Slide

Subtitle

{{ this['subtitle'] }}

subtitle of the Slide

Description

{{ this['description'] }}

description of the Slide

Button Name

{{ this['button name'] }}

button name

Button Link

{{ this['button link'] }}

button link

Unique Slider ID

{{ uniq_slider_id }}

slider's unique id

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:

Document image

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

Using the same Layout multiple times on one page

If you're using the same Slider Layout more then once on a Page you'll need to add a "Unique Slider ID" to your include:

HTML
|

If this is added we'll run some extra logic on the layouts to ensure JS is mounted to the correct layout.

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!

Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Studio
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Syntax
Parameters
Liquid Tags
Layouts
Using the same Layout multiple times on one page
GlideJS