使 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 的宽度属性设置为“自动”。您可以使用相对 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)