Shiny HTML full page Bootstrap carousel - html

Question

I am begining in styling shiny apps.
I want to create a create a full screen slider into a tabpanel of my application for my landing page.
According to this snippet, here's my application.
The carousel is empty. How can I solve this issues (perhaps the inline css <div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);"> not working?
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)
And the LESS 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;
}
}
}

Answer 1

The URL's of the images loaded within your carousel seem dead except for the second or middle URL:
Does not load:
<div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);">
Does load:
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=545);">
Does not load:
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">
The code is working fine (you might want to fix your CSS however):
html, body {
height: 100%;
}
.tcb-bs-fullscreen {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-bg .carousel-inner .item {
background-color: #ccc;
background-size: cover;
background-position: center;
min-height: 360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tcb-bs-fullscreen">
<div id="carousel-example-generic" class="carousel slide" 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">
<img src="https://unsplash.it/1600/840?image=697" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1600/840?image=545" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1600/840?image=673" alt="...">
<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>
JSFiddle