使 slickR 轮播响应 [英] Make slickR carousel responsive

问题描述

这是一个

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

我需要手动添加响应行为吗?最初的 JS page 谈到了它，但我不确定如何将其翻译成 R.

R 脚本

图书馆(闪亮)图书馆(slickR)# 测试 #########################################################################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 <- 长度(gic_changed_filenames)# 捕获 img/之后的所有内容并添加到链接chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))ui <-流体页面(标签$头(标签$style(HTML(".箭头{高度:20px；}.slick-prev {左:230px；# 向右移动}.slick-next {左:250px；# 向右移动}"))),流体行(列(6，)，列(2，标签$ div(类=箭头"；)),第(4)栏)，slickROutput(slick_output"))服务器 <- 功能(输入，输出，会话){output$slick_output <- renderSlickR({slickR(obj = chart_names, height = 300, width = "100%") +设置(点 = TRUE，appendArrows = '.arrows')})}闪亮应用程序(用户界面，服务器)

解决方案

默认为自动"为 .slick-slide img 的宽度属性设置.您可以使用相对 css 单位 (%/vw/vh) 覆盖此设置以重新缩放图像:

消除了列混乱并计算了箭头的相对位置.

图书馆(闪亮)图书馆(slickR)# 测试 #########################################################################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 <- 长度(gic_changed_filenames)# 捕获 img/之后的所有内容并添加到链接chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))ui <-流体页面(标签$头(标签$style(HTML(".箭头{高度:20px；}.slick-prev {左:计算(50% - 30px)；}.slick-next {右:计算(50% - 30px)；}.slick-slide img {宽度:100%！重要；}"))),流体行(列(12，标签$div(类=箭头"))),slickROutput(slick_output"))服务器 <- 功能(输入，输出，会话){output$slick_output <- renderSlickR({slickR(obj = chart_names, height = "50%") +设置(点 = TRUE，appendArrows = '.arrows')})}闪亮应用程序(用户界面，服务器)

Here is a link to a two slide slickR carousel that works well on a desktop but when viewed on an iphone, the image is cut off. ie it is not responsive.

How do I use slickR's carousel with images and have it work on both desktop and mobile without images being cutoff?

Do I need to add the responsive behaviour manually? The original JS page talks about it, but I'm not sure how to translate that to R.

R Script

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)

解决方案

By default "auto" is set for .slick-slide img's width property. You can overwrite this setting using relative css units (% / vw / vh) to rescale the image:

Edit: removed the column chaos and calculated relative positions for the arrows.

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)

这篇关于使 slickR 轮播响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！