使 slickR 轮播响应
Make slickR carousel responsive
这是一个 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)
默认情况下,.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)
这是一个 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)
默认情况下,.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)