R Shiny：使用 slickR 的圖像的相對大小

Question

使用Shiny應用程序，我想用slickR實現 slider 以從一個圖像切換到另一個圖像。

我設法實現了 slider 但由於圖像尺寸不同，我無法正確顯示圖像。 在以下示例中，stackexchange 徽標比 stackoverflow 徽標大得多。 當使用slickR()顯示它們時，較大的徽標會像這樣進入第一個徽標：

我還想要相對於屏幕大小的圖片大小。

這是用於生成上述圖像的 Shiny 應用程序的可重現示例：

library(shiny)
library(slickR)

# User interface ----
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      
    ),
    
    mainPanel(
      slickROutput("slickr", width = "auto")
    )
  )
)

# Server ----
server <- function(input, output) {
  
  imgs_links <- list(
    "https://upload.wikimedia.org/wikipedia/fr/9/95/Stack_Overflow_website_logo.png",
    "https://upload.wikimedia.org/wikipedia/commons/6/6f/Stack_Exchange_Logo.png")
  
  output$slickr <- renderSlickR({
    
    photo_list <- lapply(imgs_links, function(x){
      tags$div(
        tags$img(src = x, width = "10%", height = "10%")
      )
    })
    
    imgs <- do.call(tagList, photo_list)
    slickR(imgs)
  })
}

# Run the application ----
shinyApp(ui = ui, server = server)

根據屏幕大小調整每個圖像大小的正確方法是什么？

Answer 1

我無法通過“slickR”package 獲得它。 這是一個不使用此 package 的解決方案，它使用“光滑” JavaScript 庫。 您必須下載庫文件並將它們放在www/slick-1.8.1/slick文件夾中。

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick-theme.css"),
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick.css"),
    tags$script(type="text/javascript", 
                src="slick-1.8.1/slick/slick.js"),
    tags$script(HTML(
      "$(document).ready(function(){
  $('#images').slick({
    arrows: true,
    dots:true
  });
});")),
    tags$style(HTML(
      "#images .slick-prev {
    position:absolute;
  top:65px; 
  left:-50px;
}
#images .slick-next {
  position:absolute;
  top:95px; 
  left:-50px;
}
.slick-prev:before, .slick-next:before { 
    color:red !important;
    font-size: 30px;
}
.content {
    margin: auto;
    padding: 2px;
    width: 90%;
}"))
  ),
  
  sidebarLayout(
    
    sidebarPanel(
      ####
    ),
    
    mainPanel(
      tags$div(
        class = "content",
        tags$div(
          id = "images", 
          tags$img(
            src = "https://upload.wikimedia.org/wikipedia/fr/9/95/Stack_Overflow_website_logo.png",
            width = "50vw"
          ),
          tags$img(
            src = "https://upload.wikimedia.org/wikipedia/commons/6/6f/Stack_Exchange_Logo.png",
            width = "50vw"
          )
        )
      )
    )
  )
)

server <- function(input, output) {
  
}

# Run the application 
shinyApp(ui = ui, server = server)

---

編輯：動態圖像數量

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick-theme.css"),
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick.css"),
    tags$script(type="text/javascript", 
                src="slick-1.8.1/slick/slick.js"),
    tags$style(HTML(
      "#carousel .slick-prev {
    position:absolute;
  top:65px; 
  left:-50px;
}
#carousel .slick-next {
  position:absolute;
  top:95px; 
  left:-50px;
}
.slick-prev:before, .slick-next:before { 
    color:red !important;
    font-size: 30px;
}
.content {
    margin: auto;
    padding: 2px;
    width: 90%;
}"))
  ),
  
  sidebarLayout(
    
    sidebarPanel(
      checkboxGroupInput(
        "images",
        "Select images",
        choiceNames = c("Stackoverflow", "Stackexchange", "Asymptote"),
        choiceValues = c(
          "https://upload.wikimedia.org/wikipedia/fr/9/95/Stack_Overflow_website_logo.png",
          "https://upload.wikimedia.org/wikipedia/commons/6/6f/Stack_Exchange_Logo.png",
          "https://www.clipartmax.com/png/small/203-2038151_asymptote-vector-graphics-language-wikipedia-rh-en-asymptote.png"
        )
      )
    ),
    
    mainPanel(
      tags$div(
        class = "content",
        uiOutput("carousel-ui"),
      )
    )
  )
)

server <- function(input, output) {
  
  output[["carousel-ui"]] <- renderUI({
    imgs <- lapply(input[["images"]], function(x){
      tags$img(src = x, width = "50vw")
    })
    imgs_div <- do.call(function(...) div(id = "carousel", ...), imgs)
    script <- tags$script(HTML(
    "$('#carousel').slick({
      arrows: true,
      dots:true
    });"))
    do.call(tagList, list(imgs_div, script))
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)