Adjust Size of Arrows and Dots on Carousel

[gjack1978]

I know the icons and colours can change but can the size of the dots and arrows on the carousel object be changed?

Thanks,
G

[CalebM]

I believe you can change both. If I understand correctly you’ll just have to use a new bigger icon. Check out the Carousel Page in the manual.

[gjack1978]

I tried this out but its not working. I selected one of the built-in icons (48x48) and configured the path to the icon as per screenshot.

I added a light red background to see if the icon size adjusted with the larger graphics and its looks like it didn’t. Am I missing something?

[Frank_Wang]

Hi there, I also encountered the same requirements, the embedded arrows of carousel are quite small. Alternatively, I used another method to enlarge the size of the arrows.

1. Disable the arrows of Carousel (PROPS/appearance/arrows...)
2. Add two arrow like icons, enlarge them into the suitable size, and move them to the left and right of carousel.
3. Creat a memory tag "BlenderPage" and bink it to carousel's activePane (PROPS/activePane)
4. Add "Configue Event" script to the Right-Arrow

tag = '[default]SystemOpr/BlenderPage' #Memory tag binded to carousel
curValue = system.tag.readBlocking([tag])
# I have 7 pages in the carousel (0~6) in my application
if 	curValue[0].value >= 6:  # Max constraint
	system.tag.writeBlocking([tag], [6]) 
else:   # To increase page number 
	system.tag.writeBlocking([tag], [curValue[0].value + 1])

5. Bind the Right Arrow color to make some difference before and after arriving max page:
   Property/Carousel.props.activePane/Map/Numeric Range/Color
6. Repeat the similar operation in Step4&5 to the Left Arrow.
7. My carousel with large arrow looks like
   
   

[pascal.fragnoud]

Open the page in your browser and press ctrl + shift + I to open the dev tools.
Click that icon:
Then select the element you want to modify (In this case, the arrows). You may have to adjust the selection a little bit in the DOM tree (the html structure you get in the dev tools).
The goal here is to find an element you can target with a css selector, usually through its classes.

Then use the stylesheet to change any css properties you want on this element. Changing something's size should be quite easy.

edit:
This selector works: [data-component="ia.display.carousel"] .display-interaction-container .arrow-container .arrow svg
It selects both arrows. You may need to also adjust some margins/positions, or their containers.
Also, This will select the arrows of ALL carousels. If you want to apply the changes to one carousel only, put a class on it and use it in the selector.
An example that worked for me:

[data-component="ia.display.carousel"] .display-interaction-container .arrow-container .arrow {
	width: 32px;
}

[data-component="ia.display.carousel"] .display-interaction-container .arrow-container .arrow svg {
	height: 32px;
	width: 32px;
}

edit 2: For the dots:
[data-component="ia.display.carousel"] .dots-container .dot

[painforyooh]

This worked great for me. Thank you!