Carousel dot indicators

Does anyone know how to insert the dots that indicate the image in a set, for the carousel. Like these….


there is not a ready made component but you can put dot icons in a container , and show them based on the number of images as well as configure the color based on the image that you currently display.

I suggest, you have one variable (current image displayed) and depending on how you want to change the images (probably some kind of button because currently swipes are not supported), you just increment / decrement this number. Also put one image component and set the formula, like this
IF(IS_EQUAL(pageVars.imageno, 1), params.mainimage, IF(IS_EQUAL(pageVars.imageno, 2), params.image2, params.image3))

As you understand it helps a lot if you have a specific number of images or less.

Next in a container put as many bullet icons as your images (and set the container center alignment) and then for each dot, set visibility function, depending on whether your image (each image )variable is empty ex for bullet 2
IF(IS_EMPTY(params.image2), false, true)
(as you can understand this doesn’t have to do it if you know for sure the exact number of images you will have no more no less)
And at last, set the color of each dot in a function, depending on whether the current image is the number of the image assigned to that dot. ex for dot assigned to imageno1
IF(IS_EQUAL(pageVars.imageno, 1), “rgba(26,34,175,0.83)”, “rgba(164,164,164,0.53)”)

Also one note, for the buttons that change your image displayed, its best is to set visibility formula that when you are in the first image you cant go to previous and when you are at the last you cant go to next, this can only work if you know the exact number of images that you display so you can put a formula that if your currently displayed image is the last set the current displayed image no to 1 and accordingly for the first image
lastly if you make the bullets big enough you could use them as buttons to change image

Hello, how do I increase the number by one? I’m assuming you mean increasing the page variable by one, how can I do this?

for example in my setup i have 3 images and for the right button i use these logics

Thank you very much but I’ve realized that my users are able to upload any amount of images they want so that would be way too many. Is there a way to have each image numbered instead like to have the image with a label of 2/14 or 3/14 if there are 14 images in the list?

Sorry for the late response but i imagine you could use the MAP function in a list of objects variable, to assigne a number in each image.

Also in each list, the things in the list are numbered automatically, i dont know if you could use that numbers and display them…

Thanks for the reply

1 Like