"parallax scroll with background image change and carousel slider + created by ravi"
Bootstrap 3.3.0 Snippet by ravi7284007

Post to Facebook Tweet this

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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="firstPage" class="ha-bg-parallax main_banner " data-type="background" data-speed="10">
<div class="ha-parallax-body">
<div id="carousel-example-generic" class="carousel slide vertical text-right" 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="container">
<div class="carousel-inner " role="listbox">
<div class="item active">
<h3 white data-wow-delay="0.1s">Defence & Power</h3>
<h1 white data-wow-delay="0.2s">JUSTICE LEAGUE</h1>
</div>
<div class="item">
<h3 white data-wow-delay="0.1s">Save People</h3>
<h1 white data-wow-delay="0.2s">Superman</h1>
</div>
<div class="item">
<h3 white data-wow-delay="0.1s">God is the creator of the Earth</h3>
<h1 white data-wow-delay="0.2s">Ravi Singh</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container text-center">
<h2>ABOUT US</h2>
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
body {
height: 1000px
}
.ha-bg-parallax {
background: url(https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/23621599_1243573765772587_1463122925949401168_n.jpg?oh=b6641b3c2f50526b0fa2d2046943c7aa&oe=5B12D8F4) 50% -0 no-repeat fixed;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
min-height: 650px;
margin: 0 auto;
width: 100%;
display: table;
vertical-align: middle;
position: relative;
}
.ha-parallax-body {
vertical-align: middle;
background: rgba(0,0,0,0.45);
text-align: center;
color: #FFFFFF;
min-height: 650px;
}
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
var header = $('.main_banner ');
var backgrounds = new Array(
'url(https://img4.goodfon.com/original/1366x768/a/4d/justice-league-superman-batman-cyborg-aquaman-womnder-woman.jpg)'
, 'url(https://img3.goodfon.com/original/1366x768/3/38/left-4-dead-crossover.jpg)'
, 'url(https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/23621599_1243573765772587_1463122925949401168_n.jpg?oh=b6641b3c2f50526b0fa2d2046943c7aa&oe=5B12D8F4)'
);
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Angular
Image Crop jQuery
Client or Partners Logo Slider
Bootstrap 4 Carousel

Questions / Comments: