> For the complete documentation index, see [llms.txt](https://docs.responsiveads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.responsiveads.com/developers/code-examples/dots-in-carousel.md).

# 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;
}
```