Make slickR carousel responsive - r

Question

Here is a link to a two slide slickR carousel that works well on a desktop but when viewed on an iphone, the image is cut off. ie it is not responsive.
How do I use slickR's carousel with images and have it work on both desktop and mobile without images being cutoff?
Do I need to add the responsive behaviour manually? The original JS page talks about it, but I'm not sure how to translate that to R.
R Script
library(shiny)
library(slickR)
# Test #########################################################################
gic_changed_filenames <- c( "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_d9bf51fdc3ec3cec.png",
"/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_fb2482d0f9923086.png")
################################################################################
num_slides <- length(gic_changed_filenames)
# Capture everything after img/ and add to link
chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))
ui <- fluidPage(
tags$head(
tags$style(HTML("
.arrows {
height: 20px;
}
.slick-prev {
left: 230px; # moves right
}
.slick-next {
left: 250px; # moves right
}
"))
),
fluidRow(
column(6,),
column(2,
tags$div(class="arrows"
)),
column(4)),
slickROutput("slick_output")
)
server <- function(input, output, session) {
output$slick_output <- renderSlickR({
slickR(obj = chart_names, height = 300, width = "100%") +
settings(dots = TRUE, appendArrows = '.arrows')
})
}
shinyApp(ui, server)

Answer 1

By default "auto" is set for .slick-slide img's width property. You can overwrite this setting using relative css units (% / vw / vh) to rescale the image:
Edit: removed the column chaos and calculated relative positions for the arrows.
library(shiny)
library(slickR)
# Test #########################################################################
gic_changed_filenames <- c( "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_d9bf51fdc3ec3cec.png",
"/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_fb2482d0f9923086.png")
################################################################################
num_slides <- length(gic_changed_filenames)
# Capture everything after img/ and add to link
chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))
ui <- fluidPage(
tags$head(
tags$style(HTML("
.arrows {
height: 20px;
}
.slick-prev {
left: calc(50% - 30px);
}
.slick-next {
right: calc(50% - 30px);
}
.slick-slide img {
width: 100% !important;
}
"))
),
fluidRow(
column(12, tags$div(class="arrows"))
),
slickROutput("slick_output")
)
server <- function(input, output, session) {
output$slick_output <- renderSlickR({
slickR(obj = chart_names, height = "50%") +
settings(dots = TRUE, appendArrows = '.arrows')
})
}
shinyApp(ui, server)