# Settings

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.

<figure><img src="https://lh6.googleusercontent.com/HVtZoXaalDRv9F7ZukQxHxmC_luy9kPPVKTTCT_lX_RZX6uVJ1n6dYKhOc6J7lctfN9kJw78Kg1YP5kxlHLTT6_aLt_j3GZ4q4xRLfjQNEuigpsXCiGM3o39m7SGbgc46YA4oG0nHEbFcC1Tmj45YPjADd1SZqbrHyhRtTaiquaU86asILTbrgzahUbXmw" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
By default, the per view property is set to 3.
{% endhint %}

![](https://lh3.googleusercontent.com/TT7I08VI8rqazX2tBXw11hYEqd9kKk9uxPj6VIEXnkcBR5ERNCnFKWOVbuKHijdDumx0UY_M7Nm5NxmvchIRCU0RdIiOcJ66Nd0RTijNJrymjquQ44G5rv-Q296TkH9h0YKutU2jAfulDq2UO7x1gJPkzrhNgdyMF9XaRulgN_729GA3dWfr_Ibcv9fdHQ)

<details>

<summary>Modify/Reset</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Per view&#x20;
6. Enter required number
7. Click dot to reset

</details>

## Gap

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

{% hint style="info" %}
By default, the gap property is set to 10.
{% endhint %}

![](https://lh5.googleusercontent.com/LsGj45FAMuI-mfgXQbXFsZl1IILKK7U8Nk_RmuIt3yn-InzwPhBgmIJpbojqCpIttMBDGcfWOB0uDuyjwbw59pV32-c_l4-L9cfvD_9IXqv0YxIlN0WA2D03Apf0u9ESfHUdnYJmtUNXRdhTlnF2c9Rou_yyzP5amcjxJH77Z0GFKGno2npLylyYfgJ3Pw)

<details>

<summary>Modify/Reset</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Gap
6. Modify Gap
7. Click dot to reset

</details>

## Direction

The Direction property you to choose between Horizontal and Vertical display.&#x20;

{% hint style="info" %}
By default, direction is set to Horizontal.
{% endhint %}

![](https://lh3.googleusercontent.com/9SiJ-vlctcPru4lfElsPibV4zap1HRGXvugDagFltb8G059MpIbEF3tYUvo-2g0RTYNeUsVpXqNDVwSt6ANmNzU-IBHReb6L7FwHL1IjFgGRNEBd5SrITQEqKfLWNnmVDKVlKlPKt_91jlGSjpqOinO5PopFrXwoD2Rm_rpK8vdyYQ_znTKp8s9_xwVfPQ)

<details>

<summary>Direction</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Direction
6. Choose direction (Horizontal, Vertical)

</details>

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

![](https://lh5.googleusercontent.com/ziH1P62KjB3OGb5Tn3HJ7xE6euPoLovNIqRfDbcOfypi_vakqNAf0kgm6Zvdf8SG6Nkxh8covGlZdfZx4wr5DYVyOrlWe1xPmnup_LWMck-4ItTxAkMVroxyvMEUsaRlA6tebFCZxDiYchxAmTH7x4aSeOyCFd4dRRF1HF4izjFEJ-fQgV_qh6ntFVuwNg)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Slide to Clicked
6. Toggle

</details>

## Align Centre

The `Align Centre` property centres the Slides.

![](https://lh6.googleusercontent.com/AtgWmLLyeENOy3WdyUUV6Y9mLwRPzmkB6QyXeZb1p0u9hZK8_IvWeIgp8HpYiESq3HZmta34JNx9Mn7v08Txak3sKJLDPMTnspe2fC6EDXD5I65MxDFUX04KHwGB2-ibS2SNkTsvWmzelAaE8UVnhZsPy7Wpra4fkTGJgL4_axQeP5abSaTVzm1fWugCDA)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Align Centre
6. Toggle to enable/disable

</details>

## Fade

The Fade property allows you to change the transition effect between `slide` blocks from default to Fade in and Fade out.&#x20;

{% hint style="info" %}
The current `slide` block takes up all the `slider` block space.
{% endhint %}

![](https://lh5.googleusercontent.com/qp_Htb1gNxKVhrnbA4R_4hL5o58dOrUtatKQS0YzTKodh_InkqrH3XPUi4PP7Lx8sHQUt5x3agX460_OrXjLq7Err32VVbe4MRiVrhky5NGGch0Pngomq89qjuDpaMoXVbpGGBzXhGbvyzUyC_QFUhgPRuZoEeUJ0w3uW4tMd5SAtFUpqsg3Enq65dNcmA)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Fade
6. Toggle&#x20;

</details>

## Loop

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

![](https://lh6.googleusercontent.com/AOrP3vmvk9kKvzay0wJoJ3nUTYZfZ37EmThWztdomT9AFhJj7Fja-bPsPj7Td6Sag5ojgJQtlLAByy_rNcWntT7KFpGXu7NQZc9e2ZgBltU2kC8T3NCe7GbATRbLPIOMXXPS0YYHP-WG7AxiLhd6KMyhJssX68ZRGCnVGV6eXdHar24nwG6nmfWT5VSymA)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Loop
6. Toggle&#x20;

</details>

## Adaptive Height

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

![](https://lh5.googleusercontent.com/pKwcOsQ7CJ_Qx2cFKoD6i28cP6LsVry0JUGAOC9T3FoHW00-yYFcX8BvkcYh5iMhtJNMa0wWmzpaM09IyoIXq3e7grymu_je3fg4K5xVW2j8uOMEsSbUyUUwx9qIinEk-qTyvlBXbZJa30QyzVnlTdGX03lPL4qkmlo5BoWnKdw8ueGl1QhKouixnBPybw)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Adaptive Height
6. Toggle&#x20;

</details>

## Draggable

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

![](https://lh4.googleusercontent.com/YHSvc_xe3ImxOVIJg8fjWYOsGgxWlgscWOkkdVMkuEn0FqjUqDnwqN62M062faPNPvC2FYnutmu38mO5p09ALyNq5XoHcsR9oG4Snk1LKGTRuSh3ROmThZcaqlPbwQuJAenw3ZwGL3QHHsRAGn_2pEkGCZw3nxdW7UNSgfMfoB8DUPWuTO8feyrIkSzOog)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Draggable
6. Toggle&#x20;

</details>

## Free Scroll

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

![](https://lh3.googleusercontent.com/WiELVzceSWtMDe4qkkgojNrS6FAUh4Sx3Abi5GEzTc7xrCwjGo_sriKhkRCoIU0bKgCFVcegsJ7P0cIC1DtVHN_btQVNWR5OLJvdXvA2YlWtr77ZPHNox7F3hsX9GesEIIx3uH0oa-yhkT3zslX8YurrRma15M_lnEaRGwo1k9kaFIivYeyx3AEJ9ayF2g)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Slider tab
5. Find Free Scroll
6. Toggle&#x20;

</details>

## Navigation

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

{% hint style="info" %}
Once toggled, it opens the [Navigation tab](https://docs.cwicly.com/blocks/slider/navigation), from where you can find the navigation settings
{% endhint %}

![](https://lh6.googleusercontent.com/n-qeTnFX8LlQ5hnnUcVpb7OVeLSaZl4wh4XaAaZm4VscCrJAMyC9Wx_j4u1989em7FCbJ28HwA0P4U2nk8sDciR8w0pQzNjrXbIFnOM39uSJJ1vWVlr_KLvurwlrN_edW21A6tSU3mE3dq0u6a_CDO9iLaJjcpCaLpBzL8BPYBmMBuxdueXVumEFfeCYSg)

{% content-ref url="navigation" %}
[navigation](https://docs.cwicly.com/blocks/slider/navigation)
{% endcontent-ref %}

## Dots

The dots property allows you add or not, dots to your slider.&#x20;

{% hint style="info" %}
Once toggled, it opens the [Dots tab](https://docs.cwicly.com/blocks/slider/dots), from where you can find the Dots settings.
{% endhint %}

{% hint style="warning" %}
Dots can be clickable, but need the [Clickable Dots property](#undefined), in the Settings tab, to be toggled.
{% endhint %}

![](https://lh5.googleusercontent.com/Xp69udKLf_NBF1Egz3G2wpDuemWIS2ea0yb4Ov3L4D8VOle2TAR0U0-kq_mk1Os2apYN-guPuuUY7UWnnlDv1Ud4O06QFw5CdQfgDXVSyC5hAxlDY6qoJbIibDfkct7WdJPjRQKm2uJLpEra3QeWMFyHRk7OECth-5zdQssEeFcBAWpqck8q96zJiouf2g)

{% content-ref url="dots" %}
[dots](https://docs.cwicly.com/blocks/slider/dots)
{% endcontent-ref %}

## Transition

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

![](https://lh5.googleusercontent.com/dl708lcTwx09yhmYKSI6ngePDn9mqXDLqj-9JrBj51C3hO7OrUVIBPp-KYpKJEjlJvqyBsq42EAOwPahChlEfJIDEHPw0osJYPq3wAMiTPpLUgfBV3yHcNfTerQvf5dSXDMMj9CP6jE9mb16wZi7Zd3loyRZgQoSlnFStFOYJ35H93gUu-I66hzaReQEIg)

<details>

<summary>Modify</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Transition
6. Modify time (MS)
7. Click to reset

</details>

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

![](https://lh3.googleusercontent.com/PiLbD5SgFU_SxZhGhbSXv_DBVD1_tI4FiPa-SuQmsSt8VCbp6tmfEtslvD92jtv09T-jPvzwmwI28tUdAEvJmw--HLbLpitIAKgfqH1teZ0Z6-0sqD7E5aKI9QH_16eyqc81If0m7-7suKBOcWN9PDmDH2yJ2ruBQ76Nu_wj5HncGR4ami_CFyqyhvru6w)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Grab Cursor
6. Toggle on/off

</details>

## Clickable Dots

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

![](https://lh5.googleusercontent.com/TExYrRFTFeLqHAkaz7WBi-VQ0zxEb65qNwGcdYUNi-TKde62PAQR2FPbknjulZOi1d1tR1qz64J__1Om2CpGDDk73hnOr3Ysx3AMPMtP09eMZ3XEJygZ4aNgm5hqGXbXGjzQKvYY53hC2eCfviYoQE-H9rLvye3OmqkFZNB-oTpvTuRNsW8KfNup61R0uw)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Clickable Dots
6. Toggle on/off

</details>

## Thumbs Controller

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

{% hint style="danger" %}
The  Slider ID must be added to the main slider.&#x20;
{% endhint %}

![](https://lh5.googleusercontent.com/TPPi90bspRu_vtKXB4RhQZpV52s4Wrtf9u95omysZhTzJV6F3KuMT0tCdodz3YrZkZFiVfkY5f3nBym86w9QODQP9DJ-urFgWm1FFj3xEYkjZPYf6H-5FzICbOPrxeGdUE18xGXhM6BgTqw4lrfVndvHoH4CG2tKEV841XvwX6eptS-8gfy_r1fRzfZxLw)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Thumbs Controller
6. Toggle on/off
7. Input Slider ID

</details>

### Slider ID

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

<details>

<summary>Add</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Thumbs Controller
6. Toggle on
7. Find Slider ID
8. Input value

</details>

## Controller

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

{% hint style="danger" %}
The Slider ID must be added to the main slider.
{% endhint %}

![](https://lh3.googleusercontent.com/4hLVa6wgHYPZd0_vudlVmXCWmFZk1l1bsugz2o8iP0d9gUauTaUQAss2K8lbj0S21T7EymwqTcGiKlEe1bdUAiKI5X0zJFvawl8HzklW8WxQbE4Fs23MMQWS4xm6G9CTxiJX-jcjh2dWr7w6eGufbFcTJJgbUm5c3j16nr_QS4HqaqS9TuhvY6iVNXyW3Q)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Controller
6. Toggle on/off
7. Input Slider ID&#x20;

</details>

### Slider ID

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

<details>

<summary>Add</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Controller
6. Toggle on
7. Find Slider ID
8. Input value

</details>

### Inverse

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

{% hint style="info" %}
The Inverse property is only available if the Controller is toggled on.
{% endhint %}

![](https://lh6.googleusercontent.com/BodbQ38v4O5TwIxT8VFLG4zxAVkyNkCfuP95eeyzQLGWxlijcK4NP2kFgLZKiUmxavxuySuUFrjMfjKoaeW4y6NqCFFn6-WMGsXCzSj5EK0QLWkjov89K0MKUhhkKwsPyZQ6-y_srNAZaYJyXw1Akb0PIb3Rsh3PcCb4qi7yEgzMElapCRam_Qa-CvB63g)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Controller
6. Toggle on
7. Find Inverse
8. Toggle on/off

</details>

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

![](https://lh6.googleusercontent.com/e1r0Qv7kdpLehf_TlbuCfUIq1ud6vZjUkHPeP12oJgYs3zSUUS5p8ETYXisiWpZT3oygB6BkpDzAGbU0L_xTmSqpElxk6My2zdQVv1U4k5uGL4UvU2_9IfEuMgcYlJ615gYQzW0FqqVofQnsLAeQnfVVJLGa9mn1Pq7QeByCXKjdBKs2G8o1SZ4YweGdTg)

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Auto Play
6. Toggle on/off

</details>

### Duration

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

<details>

<summary>Adjust</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Auto Play
6. Toggle on/off
7. Find Duration
8. Adjust
9. Click dot to reset

</details>

### Hover Pause

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

<details>

<summary>Toggle</summary>

1. Select the `slider` block
2. Open the [block inspector](https://docs.cwicly.com/gutenberg/block-inspector/)
3. Navigate to the [primary tab](https://docs.cwicly.com/gutenberg/primary-tab/)
4. Find Settings tab
5. Find Auto Play
6. Toggle on/off
7. Find Hover Pause
8. Toggle on/off

</details>