Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>here is your solution</p> <pre><code>&lt;div id="full-screen-slider" class="carousel slide"&gt; &lt;ol class="carousel-indicators"&gt; &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt; &lt;/ol&gt; &lt;div class="carousel-inner"&gt; &lt;div class="item active fullscrn"&gt; &lt;img src="http://placehold.it/600x480" class="fullscrn"&gt; &lt;/div&gt; &lt;div class="item fullscrn"&gt; &lt;img src="http://placehold.it/600x480" class="fullscrn"&gt; &lt;/div&gt; &lt;div class="item fullscrn"&gt; &lt;img src="http://placehold.it/600x480" class="fullscrn"&gt; &lt;/div&gt; &lt;/div&gt; &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt; &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt; &lt;/div&gt; &lt;style&gt; #full-screen-slider { margin-bottom: 0; } .carousel .carousel-inner .item img { width: 100%; } .all-sliders { position: fixed; top: 25px; right: 25px; color: white; z-index: 10; } .all-sliders:hover { color: white; } &lt;/style&gt; &lt;div style="top: 21%; left: 16%; position: absolute;" class="container"&gt; &lt;div class="content"&gt; &lt;div class="hero-unit span10 "&gt; &lt;h1&gt; Test&lt;/h1&gt; &lt;p&gt; &lt;/p&gt; &lt;div class="progress progress-striped active"&gt; &lt;div class="bar" style="width: 11%;"&gt; 11%&lt;/div&gt; &lt;/div&gt; &lt;p&gt; &lt;/p&gt; &lt;p&gt; &lt;a class="btn btn-primary btn-large"&gt;Learn more &lt;/a&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="Scripts/bootstrap.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { function setFullScreen() { browserHeight = $(window).height(); $("#full-screen-slider .carousel-inner .item img").css({ height: browserHeight - 20 }); } $("#full-screen-slider .carousel-inner .item:eq(0)").addClass('active'); setFullScreen(); $(window).resize(function () { setFullScreen(); }); $("#full-screen-slider").carousel({ interval: 5000 }); if ($('.content').length &gt; 0) { $('.content').css('height', ($(window).height() - $('.content-section').offset().top - 120)); } }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload