Building Shiny app with Flickity carousel - r

Question

I am building an app in Shiny and would like to interface it with metafizzy's Flickity carousel. On a single page app flickity works well using the initializing code in the example below.
However, the app I am creating uses a navbar. It seems that when I initialize the carousel it works well on the first tab, but carousels on the second tab (or other) will not initialize. However, if you are on Tab 2 (for example) and resize the window, the carousel seems to initialize and all runs smoothly on that Tab, but this will turn off / hide the other carousels on the other tabs.
I am wondering if there is a way to change the script so that all carousels on all tabs will be initialized and available when the page loads? I am very new to javascript so apologies if this is a simple question.
Thank you
ui:
library(shiny)
shinyUI(tagList(
tags$head(
includeCSS("www/flickity-docs.css"),
includeCSS("www/styles.css"),
includeScript("www/flickity-docs.min.js")
),
navbarPage(' ',
position = ('fixed-top'),
collapsible = T,
# Panel 1 =====================================================
tabPanel('Page 1',
div(class = "main-carousel",
div(class = "carousel-cell",
div(class = "carousel-inner",
h2('This text on page 1.1 is appearing')
)
)
)
),
# Panel 2 =====================================================
tabPanel('Page 2',
div(class = "main-carousel",
div(class = "carousel-cell",
div(class = "carousel-inner",
h2('This text on page 2.1 is not appearing')
)
)
)
)
),
HTML(
"<script type='text/javascript'>
// selectorAll for multiple flickity
var elems = document.querySelectorAll('.main-carousel');
// loop to initialize
for ( var i=0, len = elems.length; i < len; i++ ) {
var elem = elems[i]
new Flickity( elem, {
// options
cellAlign: 'center',
wrapAround: true,
cellSelector: '.carousel-cell',
});
}
</script>"
)
)
)
server (blank for now):
server <- function(input, output, session) {
}
CSS:
.carousel-cell {
width: 100%;
height: 100px;
margin-right: 10px;
padding: 0%;
line-height:0px;
background-color: black;
display: block;
}
.carousel-cell:before {
content: normal;
}
.carousel-inner{
width: 100%;
height: 100%;
background-color: black;
color: white;
content: normal;
padding-right: 12.5%;
padding-left: 12.5%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 5px;
font-size:20px;
}