Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Carousel in Shiny apps

My goal here is to include bootstrap carousel in my UI. I want to do something like this but with bootstrap carousel My shiny UI like this :

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")
  )
  ))

and where accueil is 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"))
     ))
}

This don't work.

I need help to put this in my shiny UI.

like image 501
Roland Samati Avatar asked Mar 01 '26 15:03

Roland Samati


1 Answers

I was playing trying to build the complete shiny UI with HTML, the link to what I have done so far is here (it still needs some adjustment): Demo Shiny App

There is quite a bit of HTML there so I didn't want to post it here. Let me know if this help so that I can post he code.

like image 193
Valter Beaković Avatar answered Mar 03 '26 04:03

Valter Beaković



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!