Dots in Carousel

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

Responsive Ads

1. Add Placeholder

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

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

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

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

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

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

Vertical dots

Responsive Ads

Update the CSS with column direction CSS

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

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