如何在swipeR组件中访问并使用内部输入控件？

当把Shiny输入控件（比如sliderInput）放入swipeR容器时，控件会无法响应操作，这是因为swipeR基于的Swiper组件默认会拦截容器内的鼠标/触摸事件，导致输入控件被当作轮播内容的一部分，无法触发交互。

解决步骤 #

要让输入控件正常工作，需要做两个核心设置：

• 给包含输入控件的容器添加swiper-no-swiping类，告知Swiper不要在该区域触发滑动逻辑
• 确保swipeR开启noSwiping选项（默认已开启，明确设置更稳妥）

修改后的完整代码 #

# swipeR example ####
library(swipeR)
library(shiny)
library(ggplot2)

wrapper <- swipeRwrapper(
  
  div(
    style = "border: 2px solid #008cba; padding: 8px; margin: 0 75px;",
    # 给包含slider的div添加swiper-no-swiping类
    div(id = "div1", class = "swiper-no-swiping", style="box-shadow: 0 0 10px 5px;", 
        sliderInput(inputId = "slider1", label = "Slider:", value = 15, min = 10, max = 25)),
    plotOutput("ggplot1", width = "400px", height = "300px"),
    align = "center"
  ),
  
  div(
    plotOutput("ggplot2", width = "500px", height = "400px"),
    align = "center"
  )
  
)

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML(
      ".shiny-plot-output {border: 2px solid royalblue;}"
    ))
  ),
  
  br(),
  
  fluidRow(
    
    column(
      12,
      swipeR(
        wrapper, height = "450px", width = "80%", effect = "cube", speed = 2000,
        navigationColor = "black", rewind = TRUE, id = "CAROUSEL",
        # 明确开启noSwiping选项
        noSwiping = TRUE
      )
    ),
    
    column(
      12,
      br(), br(), br(),
    ),
    
    column(
      3, align = "center",
      actionButton(
        "btn1", "Scatter plot", class = "btn-primary",
        onclick = "document.getElementById('CAROUSEL').swiper.slideTo(0);"
      )
    ),
    
    column(
      3, align = "center",
      actionButton(
        "btn2", "Line chart", class = "btn-primary",
        onclick = "document.getElementById('CAROUSEL').swiper.slideTo(1);"
      )
    )
    
  )
  
)

server <- function(input, output, session) {
  
  output[["ggplot1"]] <- renderPlot({
    ggplot(mtcars, aes(wt, mpg)) + geom_point() +
      labs(title = "My plot title size by sliderInput") + 
      theme(plot.title = element_text(size = input$slider1), 
            panel.border = element_rect(fill = NA, color = "firebrick"))
  }, width = 400, height = 300)
  output[["ggplot2"]] <- renderPlot({
    ggplot(economics, aes(date, unemploy)) + geom_line()
  }, width = 500, height = 400)
  
}

shinyApp(ui, server)

关键说明 #

• 直接在包含sliderInput的div上添加class = "swiper-no-swiping"，替代原来通过JS动态添加类的方式，更可靠且避免DOM加载顺序问题
• 在swipeR调用中明确设置noSwiping = TRUE，确保Swiper识别swiper-no-swiping类的作用
• 移除了多余的JS代码，因为添加类后Swiper会自动跳过该区域的滑动事件处理，输入控件就能正常响应鼠标/触摸操作

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