# Slider

If you want to add a Slider block outside any other block on the page:

  1. Click on the  ​​icon to open the Inserter Panel
  2. Search for the Cwicly Slider block
  3. Click on the Cwicly Slider block to insert it into your page

If you want to add a Slider block inside a parent block:

  1. Open the Quick Insert panel in the parent block
  2. Search for the Cwicly Slider block
  3. Click on the Cwicly Slider block to insert it into your parent block
  1. Select the Slider block
  2. Open the Quick Insert panel in the Slider block
  3. Click on the Remove Slider icon to remove Slider

# Add Slide block

The Add Slide property allows you to add additional Slide Blocks to your Slider.

  1. Select the Slider block
  2. Open the Quick Insert panel in the Slider block
  3. Click on the Add Slide to insert a new Slide block into your Slider block

# Remove Slide block

The Remove Slide property allows you to remove a Slide Block from your Slider Block

  1. Select the Slide to be removed
  2. Open the Quick Insert panel in the Slider block
  3. Click the Remove Slide Icon to remove

# Colors

The Colorsproperty allows you to modify the colors of the Text, Links and Background of the Slider block .

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Colors
  5. Modify Text, Links and Background color
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Colors
  5. Click Text, Links or Background button to Reset

# Slider Settings

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

# Update Slider

The Update Slider button allows you to refresh the Slider block Settings on the backend.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Update Slider
  6. Click Update Slider to Refresh

# 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.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Per View
  6. Set Per View number
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Per View
  6. Click Per View button to Reset to default number

# Gap

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Gap
  6. Modify Gap
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Gap
  6. Click Gap button to Reset

# Direction

The Direction property allows you to choose between a Horizontal and Vertical display. By default, the direction is set to Horizontal .

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Toggle Horizontal/Vertical direction

# Slide to Clicked

The Slide to Clicked property enables a slide to transition to the clicked slide.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Toggle Slide to Clicked

# Align Center

The Align Center property centers the Slides.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Align Center
  6. Enable Align Center
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Align Center
  6. Disable Align Center button to Remove

# 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.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Fade
  6. Enable Fade
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Fade
  6. Disable Fade button to Remove

# Loop

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Loop
  6. Enable Loop
  1. Select a Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Loop
  6. Disable Loop

# Adaptive Height

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Adaptive Height
  6. Enable Adaptive Height
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Adaptive Height
  6. Disable Adaptive Height

# Draggable

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Draggable
  6. Enable Draggable
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Draggable
  6. Disable Draggable

# Free Scroll

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Free Scroll
  6. Enable Free Scroll
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Free Scroll
  6. Disable Free Scroll

# Navigation

The Navigation property allows you to navigate through the Slides in your Slider by clicking on left and right arrows.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Enable Navigation
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Disable Navigation

# Transition

The transition property allows you to adjust the slide transition time, that is the time in between slides.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to transition
  6. Set transition time
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to transition
  6. Click transition button to reset

# Grab Cursor

The Grab Cursor property allows you to apply a hand style to the cursor.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to grab cursor
  6. Toggle grab cursor to switch on and off

# Thumbs Controller

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to thumbs controller
  6. Toggle thumbs controller to switch on and off
  7. Input Slider ID

# Controller

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to controller
  6. Toggle controller to switch on and off
  7. Input Slider ID

# Inverse

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to inverse
  6. Toggle inverse to inverse direction

# Autoplay

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

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Autoplay
  6. Enable Autoplay
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Autoplay
  6. Disable Autoplay

# Duration

The Durationproperty allows you to modify how long you want to spend on each Slide block.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Duration
  6. Modify Duration
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Duration
  6. Click on Duration button to reset

# Hover Pause

The Hover Pauseproperty allows you to pause the Slider block on autoplay. This allows you to inspect a particular Slide block.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Hover Pause
  6. Enable Hover Pause
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Hover Pause
  6. Disable Hover Pause

# Navigation

The Navigation property allows you to customise the Navigation Icons, modify their Size, their Color and their Background Color.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Modify Icons, Size, Color and Background color
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Click appropriate button to remove Icons or modify their Size, Color or Background Color

# Navigation Icon Size

The Size property allows you modify the size of your Slider Navigation Icons.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Size
  7. Modify Size
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
    1. Navigate to Size
  6. Click Size button to restore Size

# Navigation Icon

The Icon property allows you modify the Icon of your Slider Navigation.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Icon
  7. Select Icon in drop down menus
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Icon
  7. Unselect Active to restore default Icon
  1. Click Size button to restore Size ==-

# Navigation Arrow Color

The Arrow Color property allows you modify the Color of your Slider Navigation Arrow.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Arrow Color
  7. Select Color
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Arrow Color
  7. Click Arrow Color button to remove

# Navigation Background Color

The Background Color property allows you modify the Background Color of your Slider Navigation Icon.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Background Color
  7. Select Background Color
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Background Color
  7. Click Background Color button to remove

# Navigation Radius

The Background Radius property allows you add a Radius to your Slider Navigation Background. You can link all four radius to adjust all the corners of your Background, or simply adjust a single corner by unlinking them.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Radius
  7. Add Radius
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Navigation
  6. Navigate to Radius
  7. Click Radius buttons to reset

# Dots

The Dots property allows you to navigate through the Slides in your Slider by clicking dots. You can customise Dots by changing the Dot Color, Selected Color, the height, width, position and radius.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Enable Dots
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Disable Dots

# Dot Color

The Dot Colorproperty allows you to change the color of your Navigation Dots.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Select Dot Color
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Remove Dot Color

# Dot Selected Color

The Dot Selected Colorproperty allows you to choose the color of the dot corresponding to the slide you have navigated to.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Modify Dot Selected Color
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Remove Dot Selected Color

# Dot Height

The Dot Heightproperty allows you to modify the Height of your Navigation Dots.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Select Dot Height
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Click to reset Dot Height

# Dot Width

The Dot Widthproperty allows you to modify the Width of your Navigation Dots.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Select Dot Width
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Click to reset Dot Width

# Dot Position

The Dot Positionproperty allows you to modify the Position of your Navigation Dots.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Modify Dot Position
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Click to reset Dot Position

# Dot Radius

The Dot Radiusproperty allows you to modify the Radius of your Navigation Dot. You can modify all the sides at once or unlink to select individual sides.

  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Modify Dot Radius
  1. Select Slider block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open Slider Settings
  5. Navigate to Dots
  6. Click to reset Dot Radius