Shiny切换幻灯片修改图片名称及input id无显示问题求助

我明白你的需求——切换carousel里的图片时，同步更新前方的图片名称。你当前代码里input$AA没反应，是因为shinydashboardPlus的carousel组件默认不会自动把当前选中项的信息传递给Shiny的input对象。得手动添加JavaScript逻辑来监听carousel的切换事件，把当前项的信息同步到Shiny里。

下面是修改后的完整代码，我会标注关键改动：

library(shinydashboardPlus)
ui<- dashboardPagePlus(title="Sample", 
                       dashboardHeaderPlus(title="Sample"), 
                       dashboardSidebar(), 
                       dashboardBody( 
                         fluidRow(column(width=6, 
                                         tagList(
                                           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") 
                                             )
                                           ),
                                           # 新增JS监听carousel切换事件
                                           tags$script(HTML("
                                             $('#AA').on('slide.bs.carousel', function(e) {
                                               // 获取当前激活项的caption文本
                                               var currentCaption = $(this).find('.carousel-item.active .carousel-caption').text().trim();
                                               // 把值传给Shiny的input$AA
                                               Shiny.setInputValue('AA', currentCaption);
                                             });
                                             // 页面加载时初始化一次，显示第一张图的名称
                                             $(document).ready(function() {
                                               var initialCaption = $('#AA').find('.carousel-item.active .carousel-caption').text().trim();
                                               Shiny.setInputValue('AA', initialCaption);
                                             });
                                           "))
                                         )
                                         ), 
                                 column(width=6, uiOutput("Text")) 
                         ) 
                       ) 
)
server<- function(input, output, session) { 
  output$Text<-renderText({ 
    # 现在input$AA会获取到当前carousel项的caption
    input$AA
  }) 
}
shinyApp(ui, server)

关键改动说明： #

• 添加了一段JavaScript代码，监听bootstrap carousel的slide.bs.carousel事件（这是bootstrap carousel内置的切换事件）
• 当切换发生时，获取当前激活项的carousel-caption文本，用Shiny.setInputValue()把这个值传给Shiny后端的input$AA
• 页面加载时额外触发一次初始化，确保一开始就能显示第一张图片的名称

这样修改后，你切换carousel里的图片时，右侧的文本就会自动同步显示当前图片的caption啦。

内容的提问来源于stack exchange，提问作者Ameneh Abyar