R Shiny：使用 slickR 的图像的相对大小

Question

使用 Shiny 应用程序，我想实现一个带有 slickR 的滑块以从一个图像切换到另一个图像。

我设法实现了滑块，但由于图像大小不同，我无法正确显示图像。在以下示例中，stackexchange 徽标比 Whosebug 徽标大得多。当用 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' 包获得它。这是一个不使用这个包的解决方案，它使用 'slick' 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("Whosebug", "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)

R Shiny：使用 slickR 的图像的相对大小

R Shiny: Relative size of images with slickR

r

shiny

slickr

编辑：图像的动态数量