如何使用 SlickR 在 R Shiny 中渲染具有图像和文本的轮播？

Question

我正在开发一个 Shiny 应用程序，为后端的推荐系统开发一个测试环境，我想渲染一些轮播来显示推荐算法的结果。我正在使用一个名为“SlickR”的库，并且在渲染带有闪亮文本和图像的轮播时遇到一些问题。

当我在普通 R 脚本中渲染轮播时，一切都工作正常，图像和文本位于底部，水平滚动工作正常，就像这样：

这是代码：

library(slickR)

x <- slickR(obj = c("img_1","img_2","img_3","img_4","img_5","img_6","img_7","img_8"),
            slideType = 'p',
            height = 100) +
  settings(dots = TRUE,arrows = FALSE,slidesToShow = 3,slidesToScroll = 3)
y <- slickR(obj = sample(list.files(here::here("www/categories/"),
                                    full.names = TRUE)),
            height = 100) + 
  settings(dots = FALSE,slidesToShow = 3,slidesToScroll = 3)

y %synch% x

当我将完全相同的代码包装在像这样的“renderSlickR”对象中时

      output$slick_output_1 <- renderSlickR({
    
    x <- slickR(obj = c("img_1","img_2","img_3","img_4","img_5","img_6","img_7","img_8"),slideType = 'p',height = 100) + 
      settings(dots = TRUE,arrows = FALSE,slidesToShow = 3,slidesToScroll = 3)
    y <- slickR(obj = sample(list.files(here::here("www/categories/"),full.names = TRUE)),height = 100) + 
      settings(dots = FALSE,slidesToShow = 3,slidesToScroll = 3)
      
    y %synch% x 
})

并将其发送到 ui 并使用

box(slickROutput("slick_output_1"),title = "Reel 1",width = 12)

发生这种情况：

图像不再显示，仅渲染文本，而且，轮播卡住并且不向左/向右滚动，侧面的箭头也不渲染。

在闪亮中对我有用的唯一选择是，如果我在两个对象的设置中将 dots 参数设置为 TRUE，如下所示：

  output$slick_output_1 <- renderSlickR({
    
    #This works fine because dots is TRUE in the settings for both objects
    #but this code don't render the expected output
    
    x <- slickR(obj = c("img_1","img_2","img_3","img_4","img_5","img_6","img_7","img_8"),slideType = 'p',height = 100) +
      settings(dots = TRUE,arrows = FALSE,slidesToShow = 3,slidesToScroll = 3)
    y <- slickR(obj = sample(list.files(here::here("www/categories/"),full.names = TRUE)),height = 100) + 
      settings(dots = TRUE,slidesToShow = 3,slidesToScroll = 3)
      
    y %synch% x
  })

但输出不是预期的，因为它使两个轮播同步（一个带有图像，一个带有文本），但底部都带有 (...) 来更改幻灯片：

dots参数的任何其他组合都会导致轮播冻结，并导致闪亮的意外结果，奇怪的是，如果dots参数保持为TRUE，它会起作用，但这不是我们想要的，但是如果我在普通的 R 脚本中运行它，任何组合都可以工作，并且所有结果都会正确呈现轮播。

对我来说，当它与shiny一起使用时，它看起来像是库的一个错误，但我想问社区以前是否有人遇到过同样的问题，如果我们同意这是一个错误，或者如果我做错了什么，或者即使有人知道替代方案。

Answer 1

我认为原因如下。

slickR

函数返回一个带有id的HTML元素，默认情况下这个id是

baseDiv

。因此，通过您的代码，您会得到两个具有相同 id 的 HTML 元素，而这在 HTML 文档中是不允许的。因此，如果您使用

slideId

参数提供两个不同的 id，那么应该可以工作。

library(shiny)
library(slickR)

ui <- fluidPage(
  br(),
  slickROutput("s")
)

server <- function(input, output) {
  output$s <- renderSlickR({
    x <- slickR(obj = nba_player_logo$uri[1:3], slideId = "slick1")
    y <- slickR(obj = c("img1", "img2", "img3"), slideType = "p", slideId = "slick2")
    y %synch% x
  })
}

shinyApp(ui, server)