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
  • Per View
  • Gap
  • Direction
  • Slide to Clicked
  • Align Centre
  • Fade
  • Loop
  • Adaptive Height
  • Draggable
  • Free Scroll
  • Navigation
  • Dots
  • Transition
  • Grab Cursor
  • Clickable Dots
  • Thumbs Controller
  • Slider ID
  • Controller
  • Slider ID
  • Inverse
  • Auto Play
  • Duration
  • Hover Pause

Was this helpful?

  1. Blocks
  2. Slider

Settings

Last updated 2 years ago

Was this helpful?

The Slider Settings tab allows you to adjust the settings of each slideshow independently so you can have multiple sliders on your page or website, each with their own design and individual customisations.

Tabs are provided so that you can easily locate and modify settings, navigation, dots and colours.

Per View

The Per View property allows you to set the number of Slides you wish to appear in the slider block at a time.

By default, the per view property is set to 3.

Modify/Reset
  1. Select the slider block

  2. Find Slider tab

  3. Find Per view

  4. Enter required number

  5. Click dot to reset

Gap

The Gap property allows you to modify the Gap between the Slides in the slider block.

By default, the gap property is set to 10.

Modify/Reset
  1. Select the slider block

  2. Find Slider tab

  3. Find Gap

  4. Modify Gap

  5. Click dot to reset

Direction

The Direction property you to choose between Horizontal and Vertical display.

By default, direction is set to Horizontal.

Direction
  1. Select the slider block

  2. Find Slider tab

  3. Find Direction

  4. Choose direction (Horizontal, Vertical)

Slide to Clicked

The Slide to Clicked property enables the user to transition to the next slide with a click(slide to the clicked one").

Toggle
  1. Select the slider block

  2. Find Slider tab

  3. Find Slide to Clicked

  4. Toggle

Align Centre

The Align Centre property centres the Slides.

Toggle
  1. Select the slider block

  2. Find Slider tab

  3. Find Align Centre

  4. Toggle to enable/disable

Fade

The Fade property allows you to change the transition effect between slide blocks from default to Fade in and Fade out.

The current slide block takes up all the slider block space.

Toggle
  1. Select the slider block

  2. Find Slider tab

  3. Find Fade

  4. Toggle

Loop

The Loop property allows the Slider to go through all available Slides and then restart after the last Slide.

Toggle
  1. Select the slider block

  2. Find Slider tab

  3. Find Loop

  4. Toggle

Adaptive Height

The Adaptive Height property automatically adjusts the height of the slider block to slide blocks with different heights.

Toggle
  1. Select the slider block

  2. Find Slider tab

  3. Find Adaptive Height

  4. Toggle

Draggable

The Draggable property allows you to control (drag) your Slideshow using your mouse.

Toggle
  1. Select the slider block

  2. Find Slider tab

  3. Find Draggable

  4. Toggle

Free Scroll

The Free Scroll property allows you to control (drag) your Slides freely.

Toggle
  1. Select the slider block

  2. Find Slider tab

  3. Find Free Scroll

  4. Toggle

Navigation

The navigation property allows you to add or not, navigation to your slider.

Dots

The dots property allows you add or not, dots to your slider.

Transition

The transition property allows you to modify the slide transition time, that is the time in between each slide.

Modify
  1. Select the slider block

  2. Find Settings tab

  3. Find Transition

  4. Modify time (MS)

  5. Click to reset

Grab Cursor

The Grab Cursor property allows you to apply a hand style to the cursor, which allows users to grab the slide for it to change.

Toggle
  1. Select the slider block

  2. Find Settings tab

  3. Find Grab Cursor

  4. Toggle on/off

Clickable Dots

The Clickable Dots property allows you to enable dots that can be clicked on, which will change to the corresponding slide.

Toggle
  1. Select the slider block

  2. Find Settings tab

  3. Find Clickable Dots

  4. Toggle on/off

Thumbs Controller

The Thumbs Controller property allows you to control your slider from a 'thumbs' slider.

The Slider ID must be added to the main slider.

Toggle
  1. Select the slider block

  2. Find Settings tab

  3. Find Thumbs Controller

  4. Toggle on/off

  5. Input Slider ID

Slider ID

The Slider ID helps you to identify the Thumbs slider when you add it to the main Slider menu.

Add
  1. Select the slider block

  2. Find Settings tab

  3. Find Thumbs Controller

  4. Toggle on

  5. Find Slider ID

  6. Input value

Controller

The Controller property allows you to control one slider from another slider.

The Slider ID must be added to the main slider.

Toggle
  1. Select the slider block

  2. Find Settings tab

  3. Find Controller

  4. Toggle on/off

  5. Input Slider ID

Slider ID

The Slider ID helps you to identify the Controller slider when you control another slider.

Add
  1. Select the slider block

  2. Find Settings tab

  3. Find Controller

  4. Toggle on

  5. Find Slider ID

  6. Input value

Inverse

The Inverse property allows you to inverse the direction of the controlled slider.

The Inverse property is only available if the Controller is toggled on.

Toggle
  1. Select the slider block

  2. Find Settings tab

  3. Find Controller

  4. Toggle on

  5. Find Inverse

  6. Toggle on/off

Auto Play

The Auto Play property allows you to automatically play the Slider without using the mouse. With Auto Play enabled, you can adjust duration and hover pause.

Toggle
  1. Select the slider block

  2. Find Settings tab

  3. Find Auto Play

  4. Toggle on/off

Duration

The Duration property allows you to adjust how long you want to spend on each slide block.

Adjust
  1. Select the slider block

  2. Find Settings tab

  3. Find Auto Play

  4. Toggle on/off

  5. Find Duration

  6. Adjust

  7. Click dot to reset

Hover Pause

The Hover Pause property allows you to pause the slider block on autoplay. This allows you to inspect a particular slide block.

Toggle
  1. Select the slider block

  2. Find Settings tab

  3. Find Auto Play

  4. Toggle on/off

  5. Find Hover Pause

  6. Toggle on/off

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Once toggled, it opens the , from where you can find the navigation settings

Once toggled, it opens the , from where you can find the Dots settings.

Dots can be clickable, but need the , in the Settings tab, to be toggled.

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

Open the

Navigate to the

🔧
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
Navigation tab
Navigation
Dots tab
Dots
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
block inspector
primary tab
Clickable Dots property