使 slickR 轮播响应式

如何解决使 slickR 轮播响应式

这是一个 link 到两个幻灯片 slickr carousel，它在桌面上运行良好，但在 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)

解决方法

默认情况下，.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)