Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • General
  • Layout
  • Play
  • Interaction
  • Arrows
  • Arrows
  • Styling
  • Previous (Left) Arrow
  • Right Arrow
  • Snap
  • Pagination
  • Accessibility
  • Copy and Paste Icons
  • Copy
  • Paste
  • Copy Slider ID

Was this helpful?

  1. 👆Interactions
  2. Dynamic Slider

Settings Tab

Last updated 1 year ago

Was this helpful?

The Settings tab allows you to set up a slider inside your query template, repeater or taxonomy query.

When the Slider is toggled on, a Slider tab will open and give you access to a selection of tabs to help you set up your Slider, such as general, layout, play, interaction, arrows, pagination, accessibility.

For a detailed description of Slider options, please visit https://splidejs.com/guides/options/

General

The General tab allows you to adjust settings such as type (slide, loop, fade), direction (left to right, right to left, vertical), lazyload (false, true,nearby, sequential), start index, focus, update focus move.

For a detailed description of Slider options, please visit https://splidejs.com/guides/options/

Layout

The layout tab allows you to set parameters for your layout, such as number of slides per page, number of slides per move, padding, gap, height, width, fixed height, fixed width, height ration, toggle auto height, toggle auto width.

For a detailed description of Slider options, please visit https://splidejs.com/guides/options/

Play

The play tab allows you to set options for how you want the slider to play, such as transition, easing, autoplay (false, true, pause), rewind (false, true).

For a detailed description of Slider options, please visit https://splidejs.com/guides/options/

Interaction

The interaction tab gives you access to the way the user interacts with the slider, such as drag (false, true, free) min. drag threshold, snap (false, true), keyboard (false, true, global, focused), wheel (false, true), min. wheel threshold, wheel sleep, release wheel (false, true).

For a detailed description of Slider options, please visit https://splidejs.com/guides/options/

Arrows

The Arrows tab allows you to style the navigation arrows but also to set specific settings for arrow behaviour, such as arrows, styling, snap.

Arrows

The arrows property allows you to toggle navigation icons off by selecting.false in the Arrows dropdown.

To enable arrows, choose true in the Arrows dropdown (default).

This will open up additional options for styling your arrow icons.

To reset, click the blue dot.

Styling

The styling property allows you to add styles to your navigation icons (arrows) using slider specific classes, "Arrows +" and "Arrows Hover +".

If you click on one of the Styling + buttons, a slider specific class will be created.

If you now click on the new slider specific class, you will be able to style the Navigation Icons (Arrows) or Navigation Hover.

Previous (Left) Arrow

The previous arrow property allows you to show/hide the previous (left) navigation icon and to select an alternative icon.

Right Arrow

The right arrow property allows you to show/hide the right navigation icon and to select an alternative icon if desired.

Snap

The snap property snaps to the closest slide when you drag.

Pagination

The pagination property allows you to modify parameters in the pages of your dynamic slider such as whether pages are visible or not, page wrapper, page number and active page.

Pagination

The Pagination dropdown allows you to choose whether to have pagination visible or not on your dynamic slider (false, true).

To have pagination, select "true" in the dropdown.

Styling

The styling property allows you to add slider specific classes to your pagination, such as "Page Wrapper", "Page Item", "Page Item Active".

  • Select the slider specific class you require to add it to the class of the parent block.

  • When you click on the slide specific class you want to modify, an editing panel will open up where you can adjust styling options as below.

Keyboard

Before setting up keyboard access to pagination, remember to enable Keyboard in the Interaction panel

When enabled in the pagination tab, (true in dropdown) keyboard will allow you to control slider pagination from the keyboard on the front end.

Direction

The direction property allows you to select the direction in which you wish to control your dynamic slider from the keyboard on the frontend (left to right, right to left, vertical).

Accessibility

The accessibility property allows you to add an accessibility label (the thing it labels) or labelled by (references other elements) to your dynamic slider.

Copy and Paste Icons

Next to the Slider toggle you will find Copy and Paste Icons.

Copy

The copy icon allows you to copy the slider options you have set up so that you can transfer them to another dynamic slider elsewhere.

Paste

The paste icon allows you to paste slider options copied from another dynamic slider.

Copy Slider ID

The Copy Slider ID icon allows you to copy the ID of your slider so that you can paste it somewhere else on the page.