2

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

在此处输入图像描述

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

我需要手动添加响应行为吗？原始的 JS页面谈到了它，但我不知道如何将它翻译成 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)
4

1 回答 1

3

默认情况下，为.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)
于 2021-06-07T08:12:42.003 回答