R Shiny-Ausgabe wird nicht im Bootstrap-Karussell

Question

Ich versuche, Bootstrap Karussell in meiner R Shiny App zu verwenden. Ich möchte Buttons, Textausgaben und Plots (Plot) in jede "Folie" einfügen.

An diesem Punkt Karussell selbst funktioniert gut und die FIRST „slide“, die arbeitet 2 Grund nach innen hat. Aber auf der zweiten bis vierten „gleiten“, die Textausgaben und Plots Sie machen nicht und Tasten zeigen sich aber nicht funktionieren, kann ich nur sehen UI-Komponenten wie Panel-Boxen.

Bevor ich die Plots und Textausgaben in das Karussell verschiebe, funktionieren sie. Also, nachdem ich sie aus dem Karussell gebracht habe.

Nachstehend ist mein ui.R:

div(
id = "snapshot_carousel", 
class="carousel slide", 
`data-ride`="carousel", 
`data-interval`="false", 
tags$ol(
    class="carousel-indicators", 
    tags$li(
     `data-target`="#snapshot_carousel", 
     `data-slide-to`="0", 
     "Slide 1", 
     class="active" 
    ), 
    tags$li(
     `data-target`="#snapshot_carousel", 
     `data-slide-to`="1", 
     "Slide 2" 
    ), 
    tags$li(
     `data-target`="#snapshot_carousel", 
     `data-slide-to`="2", 
     "Slide 3" 
    ), 
    tags$li(
     `data-target`="#snapshot_carousel", 
     `data-slide-to`="3", 
     "Slide 4" 
    ) 
), 
div(
    class="carousel-inner", 
    div(
     class="item active", 
     div(
      class="well well-lg", 
      div(
       class="panel-body", 
       column(
        width = 3, 
        wellPanel(
         class = 'panels', 
         id = 'actv_loan_well', 
         h4("Active Accounts"), 
         hr(), 
         tags$div(textOutput("t1"), class = "med_number") 
        ) 
       ), 
       column(
        width = 9, 
        wellPanel(
         class = 'panels', 
         column(
          width = 3, 
          h4("Active Balance"), 
          hr(), 
          tags$div(textOutput("t1"), class = "med_number") 
         ), 
         column(
          width = 9, 
          plotlyOutput("actv_bal_hist", height = "100px") 
         ) 
        ) 
       ) 
      ) 
     ) 
    ), 
    div(
     class="item", 
     div(
      class="well well-lg", 
      div(
       class="panel-body", 
       fluidRow(
        column(
         width = 6, 
         wellPanel(
          class = 'panels', 
          h4("Account Closed"), 
          hr(), 
          fluidRow(
           column(width = 9, 
             tags$div(textOutput("n_acct"), class = "big_number")), 
           column(width = 3, 
             actionButton("acct_closed", "", icon = icon('plus-circle', 'fa-fw')) 
           ) 
          ) 
         ) 
        ), 
        column(
         width = 6, 
         wellPanel(
          class = 'panels', 
          h4("Balance Closed"), 
          hr(), 
          tags$div(textOutput("bal_close"), class = "big_number"), 
          plotlyOutput("bal_close_plot", height = "250px")  
         ) 
        ) 
       ) 
      ) 
     ) 
    ), 
    div(
     class="item", 
     div(
      class="well well-lg", 
      div(
       class="panel-body" 
      ) 
     ) 
    ), 
    div(
     class="item", 
     div(
      class="well well-lg", 
      div(
       class="panel-body" 
      ) 
     ) 
    ) 
)#, 
# a(
#  class="left carousel-control", 
#  href="#snapshot_carousel", 
#  `data-slide`="prev", 
#  span(
#   class="glyphicon glyphicon-chevron-left" 
# ), 
#  span(
#   class="sr-only", 
#   "Previous" 
# ) 
#), 
# a(
#  class="right carousel-control", 
#  href="#snapshot_carousel", 
#  `data-slide`="next", 
#  span(
#   class="glyphicon glyphicon-chevron-right" 
# ), 
#  span(
#   class="sr-only", 
#   "next" 
# ) 
#) 

)

Answer 1

ich eine Lösung heraus CSS. Es ist vielleicht nicht die beste Lösung, aber hoffentlich kann es Menschen mit ähnlichen Bedürfnissen helfen.

Die Lösung besteht darin, dem Tabset-Panel Karussellklassen hinzuzufügen. Beachten Sie, dass ich # href = "# tabs-1" in jedem li (a()) für Switch-Tabs hatte, was einen Konflikt mit dem Gleiteffekt hat. Es funktioniert, nachdem ich

div(
id = "my_carousel", 
class="carousel slide", 
`data-ride`="carousel", 
`data-interval`="false", 
tags$ul(
    id = "stab", 
    class = "nav nav-pills nav-justified shiny-tab-input", 
    tags$li(
     class = "active", 
     `data-target`="#my_carousel", 
     `data-slide-to`="0", 
     a(
      `data-toggle`="tab", 
      "Slide 1" 
     ) 
    ), 
    tags$li(
     `data-target`="#my_carousel", 
     `data-slide-to`="1", 
     a(
      `data-toggle`="tab", 
      "slide 2" 
     ) 
    ), 
    tags$li(
     `data-target`="#my_carousel", 
     `data-slide-to`="2", 
     a(
      `data-toggle`="tab", 
      "slide 3" 
     ) 
    ) 
), 
div(
    class="tab-content carousel-inner", 
    role="listbox", 
    div(
     class="item tab-pane active", 
     div(
      class="well well-lg", 
      div(
       class="panel-body" 
      ) 
     ) 
    ), 
    div(
     class="item tab-pane", 
     div(
      class="well well-lg", 
      div(
       class="panel-body" 
      ) 
     ) 
    ), 
    div(
     class="item tab-pane", 
     div(
      class="well well-lg", 
      div(
       class="panel-body" 
      ) 
     ) 
    ) 
) 
) 

nehme