将 R 的 slickR 轮播中的“上一页”和“下一页”按钮移动位置

Question

我可以成功地移动slickR走马灯的“下一个”按钮。然而，当我使用类似的方法移动“上一个”按钮时，它不起作用。操作和鼠标悬停不再起作用。为什么会这样？如何移动“prev”按钮并保持完全功能？ 文档中提到了一个名为appendArrows的设置元素。但我不清楚如何使用它。

appendArrows character, Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object), Default: $(element)

这里应该出现完全功能的移动按钮：

library(shiny)
library(slickR)

# Test #########################################################################
chart_names_list <- c( "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+1", 
                                                "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+2",
                                                "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+3")
num_slides <- 2


ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .slick-next {
      right: 163px;
      top: 20px;
    }
    .slick-prev {
      left: 670px;
      top: 20px;
    }
    .slick-slide {
      margin-top: 30px;
    }
      
    ")
    )
  ),
  
  slickROutput("slick_output")
)

server <- function(input, output, session) {
  output$slick_output <- renderSlickR({
    slickR(obj = chart_names_list, height = 300, width = "100%") +
      settings(dots = TRUE)
  })
}

shinyApp(ui, server)

- ixodid

Answer 1

appendArrows参数用于指定箭头应显示在哪个

类中。

这展示了原则，但仍需要一些额外的css才能获得您期望的确切结果:

library(shiny)
library(slickR)

# Test #########################################################################
chart_names_list <- c( "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+1", 
                       "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+2",
                       "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+3")
num_slides <- 2


ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .arrows {
      height: 30px;}"))
  ),
  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_list, height = 300, width = "100%") +
      settings(dots = TRUE, appendArrows = '.arrows')
  })
}

shinyApp(ui, server)

- Waldi

---

太好了。你能展示一下如何在Rmarkdown中实现，不使用Shiny的方法吗？ - ixodid

这在RMarkdown中似乎有点棘手，并且使用css chunck后跟着<div class = "arrows"></div>并不成功：它有了效果，但我没有成功地将按钮放置在正确的位置。 - Waldi

好的。最后一个问题。在桌面上它运行良好，但在 iPhone 上查看时，图像被截断了。即它不是响应式的。请参见：https://iframe.whatbank.ca/tmp/，其中使用：height = 300，width =“100％”。我需要手动添加响应式行为吗？原始的 JS 页面谈到了这个问题，https://kenwheeler.github.io/slick/，但我不确定如何将其翻译成 R。 - ixodid

看起来真的很酷！我不能帮忙响应：超出了我的职责范围 ;-）。我这边有一个问题：你能分享一下CSS，让按钮彼此靠近吗？ - Waldi

在桌面电脑上，这个解决方案只适用于特定的窗口大小。 - ismirsehregal

@ismirsehregal，谢谢，我不知道CSS中的calc函数：已经为您的答案点赞。 - Waldi

Answer 2

采纳了@Waldi的宝贵建议并添加了一些css，以下是完整答案。

library("shiny")
library("slickR")

# Test #########################################################################
chart_names_list <- c( "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+1", 
                       "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+2",
                       "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+3")
num_slides <- 3


ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .arrows {
      height: 30px;
    }
    .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_list, height = 300, width = "100%") +
      settings(dots = TRUE, appendArrows = '.arrows')
  })
}

shinyApp(ui, server)

- ixodid

---

感谢分享css！ - Waldi

Answer 3

作为关于箭头按钮定位的原始问题，我想值得一提的是，@ixodid在这里意识到，当浏览器窗口大小调整时，@Waldi的列方法已不再适用。 以下是解决此问题的解决方法：

library("shiny")
library("slickR")

chart_names_list <- c( "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+1", 
                       "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+2",
                       "http://placehold.it/900x500/39CCCC/ffffff&text=Slide+3")
num_slides <- 3

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .arrows {
      height: 20px;
    }
    .slick-prev {
      left: calc(100% - 60px);
    }
    .slick-next {
      left: calc(100% - 35px);
    }
    .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_list, height = 300) +
      settings(dots = TRUE, appendArrows = '.arrows')
  })
}

shinyApp(ui, server)

- ismirsehregal

---

在问题中添加了图片以澄清。 - ixodid