Introduction to shinyglide

Julien Barnier

2021-06-11

shinyglide allows to add carousel-like components to shiny applications thanks to the Glide Javascript library.

Creating a glide

To add a glide component to an app, you must call the glide() function in you application UI declaration :

ui <- fluidPage(
  titlePanel("App title"),
  glide(
    ...
  )
)

Adding screens

Once your glide is created, you have to add screens to it. This is done by calling the screen() function :

ui <- fluidPage(
  titlePanel("App title"),
  glide(
    screen(
      p("This is the first screen of this glide.")
    ),
    screen(
      p("This is the second and final screen.")
    )
  )
)

Of course, screens can contain anything you want, including shiny inputs and outputs. Here is a very basic complete app :

ui <- fluidPage(
  titlePanel("Basic shinyglide app"),
  glide(
    screen(
      p("Please choose a value for n :"),
      numericInput("n", "n :", value = 100)
    ),
    screen(
      p("Here is your plot :"),
      plotOutput("plot")
    )
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(rnorm(input$n), main = paste("n =", input$n))
  })
}

shinyApp(ui, server)

You can see that default controls are added to your glide in the form of a “next” button (which doesn’t appear on last screen) and a “back” button (which doesn’t appear on the first one). There are different ways to customize these controls, which are explained in the custom controls vignette.

Customizing glide

The glide() function accepts several arguments to modify its behavior or appearance :

The loading_label, label_class and disable_type options will be described in the conditional controls and screen output vignette, and the custom_controls argument is explained in the custom controls vignette.

Here is an example of glide customization :

ui <- fluidPage(
  glide(
    id = "plot-glide",
    height = "450px",
    controls_position = "top",
    next_label = "Go to next screen",
    previous_label = "Go back",
    
    screen(
      p("Please choose a value for n :"),
      numericInput("n", "n :", value = 100)
    ),
    screen(
      p("Here is your plot :"),
      plotOutput("plot")
    )
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(rnorm(input$n), main = paste("n =", input$n))
  })
}

shinyApp(ui, server)

Customizing screens

You can also use arguments with screen() :

The next_condition and previous_condition arguments are explained in the conditional inputs and screen outputs vignette.

In app controls

It’s possible to add controls inside the content of screens, such as a button which send the user back to the first screen, a link to go two screens forward, etc.

To do this, you have to create an element (usually a link or a button) with a data-glide-dir attribute, and wrap it inside an element (usually a <div>) with a data-glide-el=“controls”` attribute.

For example, the following will create a link which will go back one screen :

div(`data-glide-el`="controls",
  a(`data-glide-dir`="<", href="#", "Go back")
)

And this will create a button that will go back to the first screen :

div(`data-glide-el`="controls",
  tags$button(`data-glide-dir`="<<", href="#", "Back to start")
)

The data-glide-dir attribute accepts the following values :

Getting back the current slide index into Shiny

shinyglide automatically updates a Shiny input with the current slide index. If you gave an id to your glide() element, you can access it with input$shinyglide_index_id, otherwise the variable name is input$shinyglide_index. Here is a quick example :

ui <- fluidPage(
  glide(
    id = "myglide",
    screen(h1("First screen")),
    screen(h1("Second screen")),
    screen(h1("Third screen"))
  ),
  textOutput("index")
)

server <- function(input, output, session){
  output$index <- renderText(
    input$shinyglide_index_myglide
  )
}

Note that this won’t work if you put an hyphen in your glide id.