Shiny: carousel collapses / folds after clicking on different tab and returning to carousel page

[chikkinen]

When clicking on a different tab in the nav bar, and then returning to the 'homepage' with the slick carousel, the carousel 'collapses' or 'folds'. As shown in the GIF below, the texts and images overlap. This only takes a few seconds and after that it works as expected. However, it does not occur every time (2 out of 3) and on start-up it works perfectly.

Can this be prevented?

Using renderSlickR in server:

output$slideshow <- renderSlickR({
  opts <- settings(
    autoplay = TRUE,
    initialSlide = 0,
    slidesToShow = 3,
    slidesToScroll = 1,
    focusOnSelect = TRUE,
    arrows = TRUE)

  slides_dom <- slick_list(
    mapply(create_slides, stock_newest$MAKE, stock_newest$MODEL, stock_newest$COLOR_PHOTO, stock_newest$UPLOADDATE)
  )
  
  slickR(slides_dom) + opts
})

UI of slides:

create_slides <- function(make, model, image, date_added) {
    tagList(
        htmltools::tags$div(
            class = "col-sm-12",
            htmltools::tags$div(
                style = 'min-height:250px',
                class="well",
                htmltools::tags$div(
                    class = 'row',
                    htmltools::tags$p(paste('Toegevoegd op', format(date_added, '%d-%m')), style="font-size:12px; color:#808080"),
                    htmltools::tags$div(
                        class = "col-sm-4",
                        htmltools::tags$img(src = image, height = 110)
                    ),
                    htmltools::tags$div(
                        class = "col-sm-8",
                        htmltools::tags$h2(make, class= 'bold'),
                        htmltools::tags$h3(model, class= 'bold')
                    )
                )
            )
        )
    )
}

Show output with slickROutput:

div(
  slickROutput(ns("slideshow")), style = "height:300px"
)

[zhiyongli1995]

I met the same problem. Waitting for solution...