【发布时间】：2019-09-15 16:17:14
【问题描述】：
我开始设计闪亮的应用程序。
我想在我的应用程序的标签面板中为我的登录页面创建一个创建全屏滑块。
根据thissn-p，这是我的应用程序。
轮播是空的。我该如何解决这个问题（也许内联 css <div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);"> 不起作用？
library(shiny)
ui <- fluidPage(includeCSS("carousel.css"),
navbarPage("project",
collapsible = TRUE,
tabPanel("Home",
tags$div(HTML('<div class="tcb-bs-fullscreen">
<div id="carousel-example-generic" class="carousel slide carousel-bg" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=545);">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>')
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {}
# Run the application
shinyApp(ui = ui, server = server)
还有更少的 css：
/****************************
TURN BOOTSTRAP CAROUSEL INTO FULL SCREEN SLIDER
*****************************/
html,
body {
height: 100%;
}
.tcb-bs-fullscreen{
height: 100%;
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
}
/****************************
USE BACKGROUND IMAGES IN CAROUSEL SLIDER
*****************************/
.carousel-bg {
.carousel-inner {
.item {
background-color: darkslategrey;
background-size: cover;
background-position: center;
min-height: 360px;
}
}
}
【问题讨论】：
-
嗨，Wilcar，您是否尝试过将代码分段，以便找出导致代码问题的原因以及发生的位置？见MCVE（分而治之）。我注意到你动态生成了很多 HTML，也许你首先想让它工作。
-
@Barrosy 谢谢你的建议。我想我不能使用内联 css
-
我不是在谈论内联 CSS 的使用。你用的是什么版本的 Bootstrap？
-
shiny 正在使用 bootstrap 3
-
"The carousel is empty"是什么意思？如果您的意思是没有加载另外两个图像，那是因为 URL 已死或不包含您的图像（<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">其中https://unsplash.it/1600/840?image=673可能已死）。
标签： html css r twitter-bootstrap shiny