"Vertical Slider"
Bootstrap 3.0.0 Snippet by abhimanyusankhyan4

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="banner">
<div class="container-fluid">
<div class="slider-wrap">
<div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel">
<!-- Wrapper for slides -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<p>Racing your ideas to reality</p>
<span>2 Days Ago</span>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<p>ideas to reality Racing your ideas to reality</p>
<span>2 Days Ago</span>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<p>Racing your ideas to reality ideas to reality</p>
<span>2 Days Ago</span>
</li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="img-wrap">
<img src="http://www.letsgohimachal.com/wp-content/themes/travel-site/img/slider-1.jpg" class="img-responsive">
</div>
<div class="carousel-caption ">
<div class="full-width animated fadeInUp">
<h1> <a href="">Racing your ideas to reality</a></h1>
<p>Transforming ideas to successful business goal, with your extended IT team. </p>
</div>
<div class="post-mata">
<div class="mata-list">
<ul class="">
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
/*******Banner Section Starts Here********/
#banner {
display: block;
background: #101010;
}
#banner .container-fluid {
padding: 0;
}
#banner .carousel-inner {
height: 100vh;
}
#banner .carousel-inner .item .carousel-caption {
width: 68%;
top: 11%;
left: 7%;
text-align: left;
margin: 0 auto;
padding: 0;
}
#banner .carousel-inner .item .carousel-caption h1 a {
font: 400 40px/21px raleway;
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
#banner .carousel-inner .item .carousel-caption h1 {
margin: 0 0 20px 0;
}
#banner .carousel-inner .item .carousel-caption p {
font: 400 15px/21px roboto;
color: #fff;
letter-spacing: 1px;
margin: 0 0 10px 0;
}
#banner .carousel-inner .item .post-mata .mata-list,
#banner .carousel-inner .item .post-mata .tags {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: