juba / shinyglide

Glide.js component for Shiny apps
https://juba.github.io/shinyglide/
91 stars 8 forks source link

Is there an indicator of the number of slides? #19

Closed ixodid198 closed 3 years ago

ixodid198 commented 3 years ago

In Glide.js there are translucent dots that indicate the number of slides and where you are in the order. Screen Shot 2020-12-19 at 8 43 27 PM Does shinyglide have a similar indicator? If so, how do I turn it on?

Simple Example Without Indicator

library(shiny)
library(shinyglide)

ui <- fluidPage(
  titlePanel("Basic shinyglide app"),
  glide(
    next_label = paste("Next", icon("play", lib = "glyphicon")),
    previous_label = span(style = "opacity: 0.5;", "Previous"),

    screen(
      p("Image 1"),
      tags$img(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=This+is+slide+1")
    ),
    screen(
      p("Image 2"),
      tags$img(src = "https://placehold.it/900x500/39CCCC/ffffff&text=This+is+slide+2")
    )
  )
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
juba commented 3 years ago

Hi,

There is no implementation of Glide.js bullets in shinyglide. The only way to add an indicator would be to add bullets tags in a custom controls implementation, and add the CSS to style them. Something like :

controls <- tagList(
    glideControls(),
    tags$div(class="glide__bullets", `data-glide-el`="controls[nav]",
      tags$span(class="glide__bullet"),
      tags$span(class="glide__bullet"),
      tags$span(class="glide__bullet"),
      tags$span(class="glide__bullet")
    )
  )

With a CSS like :

.glide__bullets {
  position: absolute;
  bottom: 10px;
  left: 100px;
}

.glide__bullet {
  width: 1em;
  height: 1em;
  background-color: #CCC;
  display: inline-block;
}

.glide__bullet--active {
  background-color: #444;
}

But there would be limitations, such as I don't think you could have the number of slides determined automatically.

ixodid198 commented 3 years ago

Understood. Is it a potential feature?

juba commented 3 years ago

Unfortunately, even if I see how such a progress indicator could be useful, I don't think I'll have time to work on this myself in the near future...