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)

Waldi · Accepted Answer · 2021-06-03T06:36:05.407

2

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)

edited Jun 03 '21 at 06:36

answered Jun 03 '21 at 05:35

Waldi

39,242
6
30
78

1

Great. Can you show how this would work in an Rmarkdown, no Shiny approach? – ixodid Jun 03 '21 at 09:55
1

This seems a bit trickier in RMarkdown, and didn't succeed with a [css chunck](https://bookdown.org/yihui/rmarkdown-cookbook/html-css.html#html-css) followed by `
` : it has an effect, but I didn't manage to place the buttons properly. – Waldi Jun 03 '21 at 10:48
OK. Last question. It works well on a desktop but viewed on an iphone the image is cutoff. ie it is not responsive. See: https://iframe.whatbank.ca/tmp/ which uses: height = 300, width = "100%" Do I need to add responsive behaviour manually? The original JS page talks about it, https://kenwheeler.github.io/slick/ but I'm not sure how to translate that to R. – ixodid Jun 04 '21 at 02:28
Looks really cool! I won't be able to help for responsiveness : outside my swim lane ;-). One question on my side : could you share the css to make the buttons near each other? – Waldi Jun 04 '21 at 05:09
Also on a desktop PC this solution only works for certain window sizes. – ismirsehregal Jun 09 '21 at 23:42
@ismirsehregal, thanks, I didn't know the `calc` function in css : upvoted your answer – Waldi Jun 11 '21 at 05:59

ismirsehregal · Answer 2 · 2021-06-08T18:36:42.340

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)

Added image to question to clarify. – ixodid Jun 01 '21 at 21:02 — ixodid, Jun 01 '21 at 21:02

score 1 · Answer 3 · answered Jun 04 '21 at 17:33

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)

Move previous next buttons in R's slickR carousel

3 Answers3