# Dots

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

When you activate  Dots you can choose to make them [Clickable](#clickable-dots). Activation will also open the Dots tab where you can find all the parameters to modify and personalise your Dots with: Dot Colour, Selected Colour, Height, Width, Position and Radius.

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

<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 Dots
6. Toggle&#x20;

</details>

<figure><img src="https://lh6.googleusercontent.com/PEp_UVfb9mUeD0ucDn6yzudpCZt9GWPiksdUABMdRaB-CoTi5B_pSoD2SOd1QxzdiJuNhJa_yZE3IvWMl-Ki7otTWVfApS8GJ0VCUktmg7utRHD3TJHMDUEnIl-hBUx1Llzc2h9MIvQRcO_b3zZA4mSIxrQHAZ-VNBAp9O0FIklZtymSvoxWq9MIVKPyww" alt=""><figcaption></figcaption></figure>

## Clickable Dots

Dots can be made clickable to allow you to navigate through the Slides in your Slider by clicking Dots.

![](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 Dots
6. Toggle Dots to enable
7. Find Clickable Dots
8. Toggle

</details>

## Dot

The Dot  property allows you to change the colour of your Navigation Dots.

![](https://lh3.googleusercontent.com/J-XVg0lH6W2HvCdPpvZpFN-OUq6--XnlkpL4UMlmev4TNZPIf7rnj8Ec-lc6cjdcUjAoqRL3otS3-eM4AZbES3Yc54tLjYe0yvq8TfYClBh0L7mpVPJlflqTssZAyYuUV6zOnUEleuwkYUy1dq9RdAj40XXjDg8ZatlUiTNjessdUu0Phbc1-EElftb2Bg)

<details>

<summary>Modify</summary>

1. Select  `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 Dots
6. Toggle Dots to enable
7. Find Dots tab
8. Open Dots tab
9. Find Dot
10. Modify colour
11. Click blue dot to reset

</details>

## Selected Dot

The Selected Dot property allows you to choose the colour of the dot corresponding to the slide you have navigated to.

![](https://lh3.googleusercontent.com/MKHJhVLe9LkznTm1R8f3PfF8bdAXoF9lgtMHqhEVd_HR6zgdZrkyoUwmE6pn5Pbt9JQUVQaRL1AI7FywfYVf2XwjytNY2UKCkc1_ADqEebl3CniahvXwfjf6s_5YwM8y4EsSb0aIWyda9VV2yLQwNIWAs-hA-bpiR330U5GkCpE6upTX5fVfJ25bPP3ZeQ)

<details>

<summary>Modify</summary>

1. Select  `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 Dots
6. Toggle Dots to enable
7. Find Dots tab
8. Open Dots tab
9. Find Selected Dot
10. Modify colour
11. Click blue dot to reset

</details>

## Height

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

![](https://lh5.googleusercontent.com/yXECByMDdMnA4n22uTRvHgGIEr1ZIspJBt7S2TG_jn-B74ZyOe9-5dgV36wE_oPGuVfmvNU-A4fRn1Vx0ggRwIkiw765JWRSP8l8v4Ejfs4qGntdna-pG2fhGVPPjwOJQsV-HybLPzcxV_As4zOBFN5UjwK95SNc3qzYWRsUM8V1PrXlJckx-07XGbEvAg)

<details>

<summary>Modify</summary>

1. Select  `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 Dots
6. Toggle Dots to enable
7. Find Dots tab
8. Open Dots tab
9. Find Height
10. Modify&#x20;
11. Click blue dot to reset

</details>

## Width

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

![](https://lh3.googleusercontent.com/qe85lgxC2jfOxJs8yZOfQzKz3osxCP8uo1ZVZwy2pEl6oYwGLXLF-3KsUpydLVpykk_jvE-Ph6zs-xZfCllk6-ulYvQFHSniLwp5YVlGD8sGdbsfeobYYcK67Ju4J6n22R9IBLJlBxCQ0evfekXhTb1Z627GBvDYhXBY9cmQfK3rkGIo6RK0Dg_dfoGzeA)

<details>

<summary>Modify</summary>

1. Select  `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 Dots
6. Toggle Dots to enable
7. Find Dots tab
8. Open Dots tab
9. Find Width
10. Modify Width
11. Click blue dot to reset

</details>

## Position

The Position property allows you to modify the Position of your Navigation Dots, that is where they are placed in the slide.

![](https://lh4.googleusercontent.com/B0aUgNC62GHwqrFLI3nKS6FOyMuQNcRSZAPvunkLSBxPw-FYuG76QNuVBo_5jn5EUPhPsbeidqzSGkTPG9JDhatVxZVqyNYvRDtkWXkm4reuX8yQF0MRqFVWKc2a_NxH6lp0QZuZqLnuO_6sJCTjmYKCuj8SsqbeuT2WTLeFJ9gtdv_Aghhh4ZJ9M4Vi2Q)

<details>

<summary>Modify</summary>

1. Select  `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 Dots
6. Toggle Dots to enable
7. Find Dots tab
8. Open Dots tab
9. Find Position
10. Modify position
11. Click blue dot to reset

</details>

## Radius

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

![](https://lh3.googleusercontent.com/-VzuJjnie40CdZWHZIiFhpDbhk9SglUC-fer01GZAaXN_jJld2NdxNcBvXrbnID6-gsrecxKJZOgyDmP5-S4TjAOnqlp6YkUu0WP4LlCEkz80ROv-PFqjN5Z5E7GdF_5vuNIKos_Rc-4BAAQB8JnJF4-jINctlS84kTSS7NCxIrZTsdhIcsvEvqtSeu1qg)

<details>

<summary>Modify</summary>

1. Select  `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 Dots
6. Toggle Dots to enable
7. Find Dots tab
8. Open Dots tab
9. Find Radius
10. Modify radius either linked or individual
11. Click dot to reset

</details>