Bootstrap Snippet Fullscreen carousel using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="rolandthemes-fullscreen-slider">
<div id="full-screen-carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
   <a class="pull-left" href="#full-screen-carousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-menu-left"></span></a>
   <a class="page-scroll" href="#services"><i class="fa fa-angle-down"></i></a>
   <a class="pull-right active" href="#full-screen-carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-menu-right"></span></a>
  </ol>
  <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item" style="background:#ce020c url() no-repeat top center;background-attachment:fixed;
"><div class="fill">
    <h1 class="animated fadeIn">web design</h1>
</div>
        </div>
        <div class="item" style="background:#f20c49 url() no-repeat top center;background-attachment:fixed;
"><div class="fill">
    <h1 class="animated fadeIn">design grafic</h1>
</div>
        </div>
        <div class="item active" style="background:#fc9700 url() no-repeat top center;background-attachment:fixed;
"><div class="fill">
    <h1 class="animated fadeIn">FOTOGRAFIE</h1>
</div>
        </div>
        </div>   
  </div>
</section>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Full Screen slider
======================================================== */
html, body {
    width: 100%;
    height: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    background-color:#f7f7f7;
}
.rolandthemes-fullscreen-slider{
    height:100%;
    position:relative;
}
    
.rolandthemes-fullscreen-slider .carousel,
.rolandthemes-fullscreen-slider .item{
    height:100%;
    background-attachment:fixed;
    background-size:cover;
}
.rolandthemes-fullscreen-slider .carousel-inner {
    height: 100%;
}
.rolandthemes-fullscreen-slider .fill {
    width:100%;
    position:absolute;
    text-align:center;
    color:#333;
    height:100%;
    background-attachment:fixed;
}
.rolandthemes-fullscreen-slider .right,
.rolandthemes-fullscreen-slider .left{
    background-image:none;      
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fullscreen carousel"
Bootstrap 3.3.0 Snippet by rolyart

Related: See More

Questions / Comments:

"Fullscreen carousel" Bootstrap 3.3.0 Snippet by rolyart

Related: See More

Questions / Comments:

"Fullscreen carousel"
Bootstrap 3.3.0 Snippet by rolyart