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)

Answer 2

As this is the original question regarding the positioning of the arrow buttons, I guess it's worth mentioning, that @ixodid realized here, that @Waldi's column-approach is no longer working when the browser window is resized.

The following is a workaround regarding this:

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)

Answer 3

Taking @Waldi's valuable suggestions and adding some css leads to a complete answer below.

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)