Looking at your code: couldn’t you either base the component on your foundset directly or set all slides at once (instead of adding one by one)? I find it odd to send 20 single requests over the wire to add slide by slide instead of just doing something like this:
var slides = [];
for (var i = 1; i <= fsInstruments.getSize(); i++) {
/** @type {bootstrapextracomponents-carousel.slide} */
var slide = {
imageUrl: 'https://swallowhillmusic.org/wp-content/uploads/2013/03/ukulele.jpg',
caption: fsInstruments.getRecord(i).name
};
slides.push(slide);
application.output('ElcInstruments: showInstrument: fsInstruments.getRecord(i).name: ' + fsInstruments.getRecord(i).name, LOGGINGLEVEL.DEBUG);
}
elements.carousel.setSlides(slides);
This will send only one small request to the client. You have to be aware that elements.carousel.addSlide(slide) each time triggers loads of watches etc. on the component. Simply setting all slides is way more efficient and in general more what a carousel is built for. addSlide was added for completeness and to allow the rather rare use case of modifying the set of images at runtime. It is not meant to populate the carousel at start.
You forgot to mention what goes wrong with that example code… Does such an example produce the problem with the arrow keys? Maybe adding slide by slide is messing it up a bit.