Question

我正在Shiny中构建一个应用程序，并希望将其与metafizzy的Flickity轮播相关联。在单个页面上，使用下面示例中的初始化代码，应用程序的闪烁效果很好。

但是，我正在创建的应用使用导航栏。似乎当我初始化旋转木马时，它在第一个标签上运行良好，但第二个标签（或其他）上的旋转木马不会初始化。但是，如果您在选项卡2（例如）并调整窗口大小，则轮播似乎初始化并且所有选项卡都在该选项卡上顺利运行，但这将关闭/隐藏其他选项卡上的其他轮播。

我想知道是否有办法更改脚本，以便在页面加载时所有选项卡上的所有轮播都将被初始化并可用？我是javascript的新手，如果这是一个简单的问题，请道歉。

谢谢

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 <- 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;
}

使用Flickity轮播构建闪亮的应用程序

0 个答案: