Fix size on Slick R carousel's images in ShinyApp

Question

I have a shinyApp with slickR carousel that show different images. Those images come in various sizes. The large ones kind of break the overall appearance. Is there a way to fix the slickR container size and make the images adapt to that size? Any help would be greatly appreciated. Here is an example app:

library(shiny)
library(slickR)

ui <- fluidPage(#The last image breaks the overall appearance
  slickR::slickR(slick_div(c("https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045__340.jpg",
                             "https://cdn.pixabay.com/photo/2012/02/27/15/35/lion-17335__340.jpg",
                             "https://cdn.pixabay.com/photo/2018/02/01/12/51/lion-3123179__340.jpg",
                             "https://www.aprenderjuntos.cl/wp-content/uploads/2020/08/LEON-SERIO-.jpg")), height = "800px") + #height argument does not seem to do anything
    settings(autoplay = TRUE)
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

See [here](https://stackoverflow.com/a/53351090/1100107) a usage of width and height. — Stéphane Laurent, Dec 02 '22 at 06:58

score 1 · Accepted Answer · answered Dec 02 '22 at 10:23

You can use slick_list to include some img tags with a given height:

library(shiny)
library(slickR)

ui <- fluidPage(
  slickR(slick_list(
    tags$img(
      src = "https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045__340.jpg",
      height = 500
    ),
    tags$img(
      src = "https://cdn.pixabay.com/photo/2012/02/27/15/35/lion-17335__340.jpg",
      height = 500
    ),
    tags$img(
      src = "https://cdn.pixabay.com/photo/2018/02/01/12/51/lion-3123179__340.jpg", 
      height = 500
    ),
    tags$img(
      src = "https://www.aprenderjuntos.cl/wp-content/uploads/2020/08/LEON-SERIO-.jpg",
      height = 500
    )
  )) + settings(autoplay = TRUE)
)

server <- function(input, output, session) {}

shinyApp(ui, server)

for the record! `slick_list` made the images left aligned, so inside the `tags$img` just needed to add `style = htmltools::css(marginLeft ='auto', marginRight='auto')` — David Jorquera, Dec 06 '22 at 02:29

Fix size on Slick R carousel's images in ShinyApp

1 Answers1