3

我可以成功移动 slickR 的轮播的“下一步”按钮。但是，当我使用类似的方法移动“上一个”按钮时，它不起作用。动作和鼠标悬停不再起作用。为什么是这样？如何移动“上一个”按钮并保持全部功能？

该文档引用了设置中的一个元素，称为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)
4

3 回答 3

2

appendArrows参数用于告诉div应在哪个类中显示箭头。

这显示了原理，但仍需要一些额外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)

在此处输入图像描述

于 2021-06-03T05:35:26.127 回答
1

由于这是关于箭头按钮定位的原始问题，我想值得一提的是，@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)
于 2021-06-01T06:53:29.503 回答
1

采纳@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)
于 2021-06-04T17:33:49.430 回答