在子弹旁边放置旋转木马 V 形

Question

我正在使用 R 的 bsplus 包来构建图像轮播。我想移动子弹旁边的人字形。

我知道this SO sol'n 关于如何重新定位上一个/下一个 V 形。

我可以靠近（参见“右”V 形），但是当我将它放置在我想要的位置时（参见“左”V 形），它不再可点击。

这是为什么？ 如何将人字形定位在子弹旁边并保持其功能？

R 脚本

library("shiny")
library("bsplus")


ui <- fluidPage(

  
  includeCSS("/home/law/whatbank_home/tests/bullet.css"),
  
  # Application title
  titlePanel("Carousel Demo"),
  
  uiOutput("carousel")
)

server <- shinyServer(function(input, output) {
  output$carousel <- renderUI({

    bs_carousel(id = "images", use_indicators = TRUE) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Merry")
      ) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Christmas")
      ) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=To")
      ) %>%
      bs_append(
        content = bs_carousel_image(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=All")
      ) 
  })
  
})

# Run the application
shinyApp(ui = ui, server = server)

css

.carousel-control.left,
.carousel-control.right {
  background: transparent;
}

.carousel-indicators .active {
  background-color: #FCB700;
  margin-bottom: 70px;
}

.carousel-indicators li {
  background-color: #D8D8D8;
  border: 1px solid #000;
  margin-bottom: 70px;
}


.carousel-control.left .glyphicon {
    left: 180px;
    margin-left: 180px;
    top: 183px;
    margin-top: 183px;
}
.carousel-control.right .glyphicon {
    right: 180px;
    margin-right: 180px;
    top: 160px;
    margin-top: 160px;
}

Answer 1

你应该试试

.carousel-control {
    width: 2%
}

在下面的示例中，我使用 2%。

library(shiny)
library(shinydashboardPlus)  ###  carousel() is from this package
library(DT)


jscode <-"
$(document).ready(function(){
            $('#mycarousel').carousel( { interval:  false } );
});"

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tags$head(
        tags$style(HTML("
      #mycarousel {
        width:900px;
        height:600px;
      }
    .carousel-control{
      color:#FF0000;
      width: 2%;
    }
    "))
      ),
      tags$head(tags$script(HTML(jscode))),
      carousel(
        id = "mycarousel",
        carouselItem(
          DTOutput("show_iris_dt")
        ),
        carouselItem(
          caption = "An image file",
          tags$img(src = "YBS.png")
        ),
        carouselItem(
          caption = "Item 3",
          tags$img(src = "http://placehold.it/900x500/39CCCC/ffffff&text=Happy+New+Year")
        )
      )
    ),
    title = "Carousel Demo"
  ),
  server = function(input, output) {
    output$show_iris_dt <- renderDT({
      datatable(iris)
    })
  }
)