how to change the text by change the slides in shiny

Question

I want to change the name of the photo in front of the photo by changing each photo from the slide. But using the following codes, the input id is not displayed at all. The codes are as follow

library(shinydashboardPlus)

ui<-    dashboardPagePlus(title="Sample",
    dashboardHeaderPlus(title="Sample"),
          
dashboardSidebar(),
dashboardBody(

fluidRow(column(width=6, 
carousel(
id = "AA",
carouselItem(
caption = "Image1",
tags$img(src = "https://cdn.sstatic.net/Sites/stackoverflow/company/Img/logos/so/so-logo.svg?v=a010291124bf", height = 400, width = 400, align="center")
),
carouselItem(
caption = "Image2",
tags$img(src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", height = 400, width = 400, align="center")
))), 
column(width=6, uiOutput("Text"))
     )
)
)
server<- function(input, output, session) {
output$Text<-renderText({
Text<-input$AA
as.character(Text)
})
}
shinyApp(ui, server) ```

Answer 1

I do see them showing up. It's easier to see if you change the font size and color:

library(shinydashboardPlus)
library(shinydashboard)
ui<-    dashboardPagePlus(title="Sample",
                          dashboardHeaderPlus(title="Sample"),
                          
                          dashboardSidebar(),
                          dashboardBody(
                            htmltools::tags$style(
                              ".carousel-caption{
                                font-size: 48px; 
                                color: black;
                              }"
                            ),
                            fluidRow(column(width=6, 
                                            carousel(
                                              id = "AA",
                                              carouselItem(
                                                caption = "Image1",
                                                tags$img(src = "https://cdn.sstatic.net/Sites/stackoverflow/company/Img/logos/so/so-logo.svg?v=a010291124bf", height = 400, width = 400, align="center")
                                              ),
                                              carouselItem(
                                                caption = "Image2",
                                                tags$img(src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", height = 400, width = 400, align="center")
                                              ))), 
                                     column(width=6, uiOutput("Text"))
                            )
                          )
)
server<- function(input, output, session) {
  output$Text<-renderText({
    Text<-input$AA
    as.character(Text)
  })
}
shinyApp(ui, server)

Answer 2

As you are using uiOutput , try renderUI on the server side. Also, to show different text in each image, you need to define renderText and output it in carouselItem . Try this code

library(shinydashboardPlus)
library(shinydashboard)
ui<-    dashboardPagePlus(title="Sample",
                          dashboardHeaderPlus(title="Sample"),

                          dashboardSidebar(),
                          dashboardBody(
                                  tags$head(
                                    tags$style(HTML("
                                  #AA{
                                    width:900px;
                                    height:600px;
                                    }
                                .carousel-control{
                                  color:#FF0000;
                                }
                                .carousel-caption{
                                font-size: 48px;
                                color: red;}
                                "))
                                  ),
                            fluidRow(column(width=6,
                                            carousel(
                                              id = "AA",
                                              carouselItem(
                                                caption = "Image1",
                                                textOutput("text1"),
                                                tags$img(src = "https://cdn.sstatic.net/Sites/stackoverflow/company/Img/logos/so/so-logo.svg?v=a010291124bf", height = 400, width = 400, align="center")
                                              ),
                                              carouselItem(
                                                caption = "Image2",
                                                textOutput("text2"),
                                                tags$img(src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", height = 400, width = 400, align="center")
                                              ))),
                                     column(width=6, uiOutput("Text"))
                            )
                          )
)
server<- function(input, output, session) {
  output$Text<-renderUI({
    #Text<-as.character(input$AA)
    tagList(
      p("I like to print something over all images", style = "color:blue")
    )
  })
  output$text1 <- renderText("Print something in image 1")
  output$text2 <- renderText("Print something in image 2")

}
shinyApp(ui, server)