闪亮应用程序中的Bootstrap Carousel

时间:2016-08-11 22:01:51

标签: r twitter-bootstrap shiny

我的目标是在我的UI中包含bootstrap轮播。我想做this之类的东西,但是带有引导轮播 我的闪亮UI就像这样:

source("entete.R")
source("accueil.R")
library(shiny)
shinyUI(
  navbarPage("DPEE",tagList(
    tags$head(
      includeCSS("www/bootstrap.css"),
      includeCSS("www/bootstrap.min.css"),
      tags$script(src = "www/bootstrap.js"),
      tags$script(src = "www/query-ui-1-11-4.min.js"),
      tags$script('$(function(){$(".jui-tip").tooltip();});'),
      tags$script('$(function(){$("div.divinput").accordion({
                  collapsible: true,heightStyle: "content"  });});')
  ),
  tags$div(class = "container-fluid", entete())),
  tabPanel("Accueil", accueil()),
  navbarMenu("Annuaire",
             tabPanel("Prescolaire"),
             tabPanel("Primaire"),
             tabPanel("Secondaire 1"),
             tabPanel("Secondaire 2")
  )
  ))

并且 accueil 是bootstrap carousel。

accueil = function(){ 
   tags$div( id = "moncarousel", class = "carousel slide",
       tags$ol(class = "carousel-indic",
           tags$li(`data-target` = "#moncarousel",`data-slide-to`="0", class="active"),
           tags$li(`data-target`="#moncarousel",`data-slide-to` = "1"),
           tags$li(`data-target`="#moncarousel",`data-slide-to`= "2")
            ),
        tags$div(class="carousel-inner",
            tags$div(class = "item active",
                tags$img(src = "www/Koala1.jpg", class= "imag-responsive")),
            tags$div(class = "item",
                tags$img(src = "www/Koala2.jpg", class= "imag-responsive")),
            tags$div(class = "item",
                tags$img(src = "www/Koala3.jpg", class= "imag-responsive"))
     ))
}

这不起作用。

我需要帮助才能把它放在我闪亮的UI中。

1 个答案:

答案 0 :(得分:1)

我正在尝试使用HTML构建完整闪亮的UI,到目前为止我所做的链接在这里(它仍然需要一些调整): Demo Shiny App

那里有相当多的HTML,所以我不想在这里发布。如果有这个帮助,请告诉我,以便我可以发布他的代码。