Search code examples
cssshinyslick.jsslickr

Fix size on Slick R carousel's images in ShinyApp

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)
Solution

  • 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)