R slickR package replace dosts with custom text

Question

I have found cool carousel package for R https://cran.r-project.org/web/packages/slickR/vignettes/basics.html

following code will create carousel where dots are replaced by numbers

cP1 <- htmlwidgets::JS("function(slick,index) {
                            return '<a>'+(index+1)+'</a>';
                       }")

opts_dot_number <- settings(
  initialSlide = 0,
  slidesToShow = 5,
  slidesToScroll = 100,
  focusOnSelect = TRUE,
  dots = TRUE,
  customPaging = cP1
)

slick_dots <- slickR(
  obj = nba_player_logo$uri,
  height = 100,
  width = "95%"
)

slick_dots + opts_dot_number

My question is how would you replace numbers by custom text? Current code generates numbers from 1 to 11, but is it possible to replace it by

"one" "two" "three" etc

Answer 1

What you need is to add a function which translates numbers to words. There are plenty of those online, one can be found in this SO thread.

Then, it is as easy as adding this function to your custom JS:

cP1 <- htmlwidgets::JS("
function(slick,index) {
   const numToWordObj = {
     0: 'zero',
     1: 'one',
     2: 'two',
     3: 'three',
     4: 'four',
     5: 'five',
     6: 'six',
     7: 'seven',
     8: 'eight',
     9: 'nine',
     10: 'ten',
     11: 'eleven',
     12: 'twelve',
     13: 'thirteen',
     14: 'fourteen',
     15: 'fifteen',
     16: 'sixteen',
     17: 'seventeen',
     18: 'eighteen',
     19: 'nineteen',
     20: 'twenty',
     30: 'thirty',
     40: 'forty',
     50: 'fifty',
     60: 'sixty',
     70: 'seventy',
     80: 'eighty',
     90: 'ninety'
   };
   const placement = {
     100: ' hundred',
     1000: ' thousand',
     1000000: ' million',
     1000000000000: ' trillion'
   };
   
   const numToWord = (num) => {
     const limiter = (val) => num < val;
     const limiterIndex = Object.keys(placement).findIndex(limiter);
     const limiterKey = Object.keys(placement)[limiterIndex];
     const limiterVal = Object.values(placement)[limiterIndex - 1];
     const limiterMod = Object.keys(placement)[limiterIndex - 1];
   
     if (numToWordObj[num]) {
       return numToWordObj[num];
     }
     if (num < 100) {
       let whole = Math.floor(num / 10) * 10;
       let part = num % 10;
       return numToWordObj[whole] + ' ' + numToWordObj[part];
     }
   
     if (num < limiterKey) {
   
       let whole = Math.floor(num / limiterMod);
       let part = num % limiterMod;
       if (part === 0) {
         return numToWord(whole) + limiterVal;
       } else {
         return numToWord(whole) + limiterVal + ' and ' + numToWord(part);
       }
     }
   };
   return '<a>'+numToWord(index+1)+'</a>';   
}
")