# Dots in Carousel

Right now, our carousel widget does not support navigation dots. We have an example of how to implement this with customJS

 

{% embed url="<https://app2.responsiveads.com/creatives/66b3986a97868916c1950337/preview?#/responsive-all>" %}

## 1. Add Placeholder

Add a group element where the dots will be positioned on the canvas.

<figure><img src="/files/i5hepikUB4HtiJHwleZ2" alt=""><figcaption></figcaption></figure>

## 2. Copy the JS code

Copy the JS code into the custom JS window. Update `carouselId ad dotsContainerId` ID with the corresponding ID from the editor

```javascript
const carouselId = 'a16';
const dotsContainerId = 'b13';
var radDots = Radical.getAdByWindow(window);
if (!radDots.getMergedContent().inEditor) { radDots.onRender(onAdRenderDots); }
function onAdRenderDots() {
    const carousel = radDots.getElementById(carouselId);
    const dots = radDots.getElementById(dotsContainerId);
  if (!carousel || !dots) {
    return;
  }
    //add dynamic HTML structure for dots into the dots.domNone element based on the number of slides
    const dotsHTML = carousel.getSlides().map((slide, index) => {
        return `<div class="dot" style="border-radius: 50%;align-items: center;aspect-ratio: 1 / 1;height: 90%; cursor: pointer" data-index="${index}"></div>`;
    }).join('');
    //add container div for dots and set flexbox properties
    dots.domNode.innerHTML = `<div class="dot-container" style="display: flex;justify-content: center;align-items: center;gap: 10px;width: 100%;height: 100%;">${dotsHTML}</div>`;
    //set initial active dot
    setActiveDot(carousel.getVisibleSlideIndex());
    //add event listener for dots
    dots.domNode.addEventListener('click', e => {
        if (e.target.classList.contains('dot')) {
            const index = parseInt(e.target.getAttribute('data-index'));
            carousel.animateToSlideIndex(index);
            setActiveDot(index);
        }
    });
    carousel.slideChangeCallback((direction, visibleSlideIndex, domNode) => { setActiveDot(visibleSlideIndex); });
    //pause carousel white mouse is over the dots
    dots.domNode.addEventListener('mouseover', e => { carousel.pause();});
    dots.domNode.addEventListener('mouseout', e => { carousel.resume(); });
}
function setActiveDot(index) {
    //remove active class from all dots
    document.querySelectorAll('.dot').forEach(d => d.classList.remove('active'));
    //add active class to the dot
    const dot = document.querySelectorAll(`.dot[data-index="${index}"]`);
    dot.forEach(d => d.classList.add('active'));
}
```

## 3. Copy the CSS

```css
.dot {
    border: 1px solid #6F13F2;
}

.dot.active {
   background-color: #6F13F2;
}
```

If you need to style the element, use the CSS code editor.

<figure><img src="/files/uiVDZBeE6nwyfPyOqFmi" alt=""><figcaption></figcaption></figure>

### Vertical dots

{% embed url="<https://app2.responsiveads.com/creatives/675944acfa3f824c46499fcf/preview>" %}

Update the CSS with column direction CSS

```css
.dot {
    border: 1px solid #6F13F2;
}

.dot.active {
   background-color: #6F13F2;
}
.dot-container {
  flex-direction: column;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.responsiveads.com/developers/code-examples/dots-in-carousel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.