2

Here is a link to a two slide slickR carousel that works well on a desktop but when viewed on an iphone, the image is cut off. ie it is not responsive.

enter image description here

How do I use slickR's carousel with images and have it work on both desktop and mobile without images being cutoff?

Do I need to add the responsive behaviour manually? The original JS page talks about it, but I'm not sure how to translate that to R.

R Script

library(shiny)
library(slickR)

# Test #########################################################################
gic_changed_filenames <- c( "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_d9bf51fdc3ec3cec.png", 
                            "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_fb2482d0f9923086.png")
################################################################################

num_slides <- length(gic_changed_filenames)
# Capture everything after img/ and add to link
chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .arrows {
      height: 20px;
    }
    .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, height = 300, width = "100%") +
      settings(dots = TRUE, appendArrows = '.arrows')
  })
}

shinyApp(ui, server)
ixodid
  • 2,180
  • 1
  • 19
  • 46

1 Answers1

3

By default "auto" is set for .slick-slide img's width property. You can overwrite this setting using relative css units (% / vw / vh) to rescale the image:

Edit: removed the column chaos and calculated relative positions for the arrows.

library(shiny)
library(slickR)

# Test #########################################################################
gic_changed_filenames <- c( "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_d9bf51fdc3ec3cec.png", 
                            "/home/law/whatbank_website/static/fb/img/gic1-5_yield_curve_fb2482d0f9923086.png")
################################################################################

num_slides <- length(gic_changed_filenames)
# Capture everything after img/ and add to link
chart_names <- paste0("http://whatbank.ca/fb/img/", sub(".*img/", "", gic_changed_filenames))

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
    .arrows {
      height: 20px;
    }
    .slick-prev {
      left: calc(50% - 30px);
    }
    .slick-next {
      right: calc(50% - 30px);
    }
    .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, height = "50%") +
      settings(dots = TRUE, appendArrows = '.arrows')
  })
}

shinyApp(ui, server)
ismirsehregal
  • 30,045
  • 5
  • 31
  • 78
  • Your solution works well for the image of the chart but not for the arrows. I have replaced the link above with your solution and moved the arrows to the far right (on an iPhone 8) yet they are only about 2/3 of the way to the right edge of the chart. Is it possible to make the arrow location responsive as well? – ixodid Jun 08 '21 at 02:24
  • Well, this wasn't part of your initial question. The logic for the arrows is the same. However I'm not sure if you are referring to the size or the position of the arrows. I guess it's the positions. Please see my edit - the main issue was the weird use of `column`. – ismirsehregal Jun 08 '21 at 12:15