r - 使 slickR 轮播具有响应式

Question

这是一个link两张幻灯片的 slickR 轮播在桌面上运行良好，但在 iPhone 上查看时，图像会被截断。即它没有响应。

如何将 slickR 的轮播与图像一起使用，并使其在桌面和移动设备上工作而不会截断图像？

我需要手动添加响应行为吗？原JS page谈论它，但我不知道如何将其转换为 R。

R 脚本

library(shiny)
library(slickR)

# Test #########################################################################
gic_changed_filenames <- c( "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_d9bf51fdc3ec3cec.png", 
                            "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_fb2482d0f9923086.png")
################################################################################

num_slides <- length(gic_changed_filenames)
# Capture everything after img/ and add to link
chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .arrows {
      height: 20px;
    }
    .slick-prev {
      left: 230px;  # moves right
    }
    .slick-next {
      left: 250px;  # moves right
    }
    "))
  ),
  fluidRow(
    column(6,),
    column(2,
           tags$div(class="arrows"
           )),
    column(4)),
  
  slickROutput("slick_output")
)

server <- function(input, output, session) {
   output$slick_output <- renderSlickR({
    slickR(obj = chart_names, height = 300, width = "100%") +
      settings(dots = TRUE, appendArrows = '.arrows')
  })
}

shinyApp(ui, server)

Answer 1

默认情况下，.slick-slide img 的 width 属性设置为“auto”。您可以使用相对 css 单位 (%/vw/vh) 覆盖此设置来重新缩放图像:

编辑:删除列困惑并计算箭头的相对位置。

library(shiny)
library(slickR)

# Test #########################################################################
gic_changed_filenames <- c( "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_d9bf51fdc3ec3cec.png", 
                            "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_fb2482d0f9923086.png")
################################################################################

num_slides <- length(gic_changed_filenames)
# Capture everything after img/ and add to link
chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .arrows {
      height: 20px;
    }
    .slick-prev {
      left: calc(50% - 30px);
    }
    .slick-next {
      right: calc(50% - 30px);
    }
    .slick-slide img {
    width: 100% !important;
    }
    "))
  ),
  fluidRow(
    column(12, tags$div(class="arrows"))
    ),
  slickROutput("slick_output")
)

server <- function(input, output, session) {
  output$slick_output <- renderSlickR({
    slickR(obj = chart_names, height = "50%") +
      settings(dots = TRUE, appendArrows = '.arrows')
  })
}

shinyApp(ui, server)