# Adjust Size of Arrows and Dots on Carousel **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [January 20, 2021, 8:39pm UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454 "2021-01-20T20:39:31Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![gjack1978](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@gjack1978](https://forum.inductiveautomation.com/u/gjack1978)\ **Post date:** [January 20, 2021, 8:39pm UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/1 "2021-01-20T20:39:31Z")
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 ---
**Author:** ![CalebM](https://avatars.discourse-cdn.com/v4/letter/c/71c47a/32.png) [@CalebM](https://forum.inductiveautomation.com/u/CalebM)\ **Post date:** [January 20, 2021, 8:47pm UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/2 "2021-01-20T20:47:31Z")
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](https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Carousel) in the manual. ---
**Author:** ![gjack1978](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@gjack1978](https://forum.inductiveautomation.com/u/gjack1978)\ **Post date:** [January 14, 2022, 4:29pm UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/4 "2022-01-14T16:29:48Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/174bc624503f95a7f6b1e89c7115e03a67569090.png) 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? ---
**Author:** ![Frank\_Wang](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@Frank\_Wang](https://forum.inductiveautomation.com/u/Frank_Wang)\ **Post date:** [August 20, 2024, 12:22am UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/5 "2024-08-20T00:22:32Z")
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 ```python 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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/7/27c61de2ef12a493f3e6bb51e705a38d8d1665dd.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [August 20, 2024, 7:08am UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/7 "2024-08-20T07:08:08Z")
Open the page in your browser and press ctrl + shift + I to open the dev tools. Click that icon: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f872b8afd4c40a4b5074dd1c1b3615e9f924b8ae.png) 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: ```css [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` ---
**Author:** ![painforyooh](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@painforyooh](https://forum.inductiveautomation.com/u/painforyooh)\ **Post date:** [February 25, 2025, 9:44pm UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/8 "2025-02-25T21:44:15Z")
This worked great for me. Thank you! ---
**Author:** ![Bastian\_Ignacio](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bastian_ignacio/32/43245_2.png) [@Bastian\_Ignacio](https://forum.inductiveautomation.com/u/Bastian_Ignacio)\ **Post date:** [May 14, 2025, 6:16pm UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/9 "2025-05-14T18:16:12Z")
It work for me, and thanks for the explication ---
**Author:** ![Andrew\_Martin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew_martin/32/33340_2.png) [@Andrew\_Martin](https://forum.inductiveautomation.com/u/Andrew_Martin)\ **Post date:** [October 28, 2025, 7:21pm UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/10 "2025-10-28T19:21:31Z")
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: ```python .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 ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [October 29, 2025, 7:52am UTC](https://forum.inductiveautomation.com/t/adjust-size-of-arrows-and-dots-on-carousel/42454/11 "2025-10-29T07:52:50Z")
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`.