Customize statement arrows in carousel questions | XM Community
Skip to main content
Question

Customize statement arrows in carousel questions

  • May 7, 2021
  • 2 replies
  • 110 views

Does anyone have any custom code to enhance the arrows to the left and right of the statements in a carousel question? Right now our participants are saying that they don't stand out enough so I want to do a double arrows or bolder bigger buttons but I can't figure out the CSS.

2 replies

Forum|alt.badge.img
  • February 20, 2022

One idea is to double size using Javascript (below). You could also use css to put a border around the arrows or a background.
/** Customize the Chevrons **/
var cChevron = jQuery( ".CarouselChevron" );
var dbl = 2*Number(cChevron.attr( "width" ));

cChevron
.attr("width", dbl)
.attr("height", dbl); 

//Work Around
cChevron.each(function () { jQuery(this)[0].setAttribute('viewBox', '5 5 24 24') });


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • May 23, 2023

Hi, if you still need, the below CSS can be added to the Style section of the survey’s Look & Feel to increase the size of the arrows and change their color to red:

.CarouselChevronContainer {
width: 70px !important;
height: 70px !important;
}

.CarouselChevron {
fill: #ff0000 !important;
height: 70px !important;
width: 70px !important;
}

.CarouselChevron.Disabled {
fill: #FF7F7F !important;
}