# Slider

The `slider` block is a useful design element used to showcase images and other content.&#x20;

It is a slideshow that is useful for businesses who want to showcase professional portfolios or display relevant content.&#x20;

You can easily modify its appearance to add a design feature to your page or website.

{% hint style="danger" %}
The Cwicly `slider` block is empty by default but the required number of `slide` blocks are easy to add from the quick inserter.
{% endhint %}

<figure><img src="https://lh5.googleusercontent.com/XLZ6WXHEWuqIm5JHxV90Xj3wJNeVFGV2Z2mKZBUH-aEiDfh3I5yosZiF9yPriY-OIwLnsZBEREVzlaS4Oc6vDpMqWWTAXVcPd_PjDMqkKSCf2uphoLGLUtoCovpMbfLSPHWExxybBrKxshHg_w4jmBCDHGDHTZKxsB4KFeqc3H78TapFRTE78r96Ska6Mg" alt=""><figcaption></figcaption></figure>

<details>

<summary>Add</summary>

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

1. Click on the ➕ ​​icon to open the Inserter Panel
2. Search for the <img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFujNW2w7vGBWle7QUxI%2Ffavicon-black%20(1).png?alt=media&#x26;token=7217d37c-7da0-48b5-a775-e14b6e5de2f4" alt="" data-size="line"> `slider` block
3. Click on the block to insert it into your page

If you want to add a `slider` inside a parent block:

1. Open the Inserter Panel panel in the parent block
2. Search for the <img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFujNW2w7vGBWle7QUxI%2Ffavicon-black%20(1).png?alt=media&#x26;token=7217d37c-7da0-48b5-a775-e14b6e5de2f4" alt="" data-size="line"> `slider` block
3. Click on the block to insert it into your parent block

</details>

<figure><img src="https://lh5.googleusercontent.com/0S0rs-_owzU71PzTuMT2bnDF-ZO4Rgd7rGV7czSJkEq1AL_RU4SLWwtVToIbgvpb8-rj9dP2fZnluIqB8W9pr9QiT-e7KFjAJn1hKpxLwtWbxRiNhF_hbc07tixwYGtrnTX8hSP88bkTHZdiIw1onXqKJ4xrbw6IBfKoocBS8nA1RrJ6yBjWn2vDyDoXuQ" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.youtube.com/watch?v=bkj2Ikf0jmw>" %}
TTD #14 - Slider Block
{% endembed %}

## Slider Placeholder

When you add a `slider` block, a Slider Placeholder will appear.

You can add a Slide block by selecting "+ Add Slide Block" or by clicking the "+" icon in the toolbar.

To remove the Slider Placeholder, click the "dismiss button".

## Add Slide block

Add `slide` allows you to add `slide` blocks to your Slider.

<figure><img src="https://lh4.googleusercontent.com/-1eRcauJANWmvqqVcnKWcSpDomSCmvGuujyulRCoGRXrD-AA5s_wbYXgdnEkq4DHRDZnvxTwc7oOzK2X9nGVtcozcrnQUsfHcz7WF2Euc4gvnBz9MCqV4Wdq09i0wDmI426yYUjP4gG5MaWLBBGbNdoZJt1SFYUiotyvTTedJvSafUwDMLthrjZYE0Pc2w" alt=""><figcaption></figcaption></figure>

<details>

<summary>Add</summary>

1. Select a `slider` block
2. Open the Quick Insert panel in the `slider` block
3. Click on :heavy\_plus\_sign: to insert a new Slide block into your `slider` block

</details>

<details>

<summary>Remove</summary>

1. Select `Slider` block
2. Find Navigation Panel
3. Find required `slide`&#x20;
4. Click on **X** to remove

</details>

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

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

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

## Navigation

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

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

## Dots

The Dots property allows you to navigate through the Slides in your Slider by clicking dots.&#x20;

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

## Colours

The Colours property allows you to modify the colours of the Slider such as: Text, Links, Background.

<details>

<summary>Modify</summary>

1. Select the `slider` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Find Colours tab
5. Find required parameter (Text, Link, Background)
6. Modify Text, Link, Background colours as required
7. Click dot(s) to reset

</details>
