Question

我正在开始设计闪亮的应用程序。

我想在我的登录页面的应用程序的选项卡面板中创建一个创建全屏滑块。

根据这段代码https://codepen.io/nikhil/pen/RPOXya，这是我的应用程序。

轮播是空的。如何解决此问题（也许内联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)

还有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

轮播中加载的图像的URL似乎已死，除了第二个或中间URL：

不加载：

<div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);">

是否加载：

<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=545);">

不加载：

<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">

代码运行正常（但是您可能想要修复CSS）：

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

闪亮的html整页引导轮播

1 个答案: