Move previous next buttons in R's slickR carousel

Question

I can successfully move the "next" button for slickR's carousel. However, when I use the similar method to move the "previous" button it does not work. The action and the mouseover no longer work. Why is this? How can I move the "prev" button and maintain full functionality?

The documentation refers to an element in settings called, appendArrows. But it is not clear to me how to use this.

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

Here is where the fully functional moved buttons should appear:

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)

Answer 1

appendArrows parameter is used to tell in which div class the arrows should be displayed.

This shows the principle, but still needs some extra css to get exactly the result you expect :

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)