Adjust Size of Arrows and Dots on Carousel

Ignition
1

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

1 Like
2

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.

4

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.

IMG_ 20221401112748
IMG_ 20221401112748615×676 34.8 KB

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?

5

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])
  1. Bind the Right Arrow color to make some difference before and after arriving max page:
    Property/Carousel.props.activePane/Map/Numeric Range/Color
  2. Repeat the similar operation in Step4&5 to the Left Arrow.
  3. My carousel with large arrow looks like
    image
    image1297×763 60.1 KB
7

Open the page in your browser and press ctrl + shift + I to open the dev tools.
Click that icon: image
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

4 Likes
8

This worked great for me. Thank you!

9

It work for me, and thanks for the explication

10

On the off chance it didn’t work for you (which for some reason, I was stuck in) I found that appending !important finally got it working, just like:

.arrow-container .arrow svg[style] {
    fill: #CD5555 !important;
    width: 32px !important;
    height: 32px !important;
	padding-right: 10px !important;
}

Phew! Thanks to Rob Huddleston for this one

11

If !important fixes it, it's because the selector you used is less specific than the one providing the current style.
Look up css specificity to know more and maybe fix things up without having to resort to !important.