R Shiny：带有 slickR 的图像的相对大小

问题描述

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

我设法实现了滑块，但由于它们的大小不同，我无法正确显示图像。 在以下示例中，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)

根据屏幕大小调整每个图像大小的正确方法是什么？

解决方法

我无法通过 '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",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",tags$style(HTML(
      "#carousel .slick-prev {
    position:absolute;
  top:65px; 
  left:-50px;
}
#carousel .slick-next {
  position:absolute;
  top:95px; 
  left:-50px;
}
.slick-prev:before,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"
        )
      )
    ),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)