"Vertical Slider"
Bootstrap 3.3.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="//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 ---------->
<!---->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,800,900|Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<section id="rapid">
<div class="container">
<div class="row">
<div class="slider-wrap">
<div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel">
<div class="col-md-6">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<h3><span>Top Tier <br/>Professional</h3>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<h3><span>Rapid response<br/>To Needs</span></h3>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<h3><span>National Network<br/>of Talent</span></h3>
</li>
</ol>
</div>
<div class="col-md-6">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="" id="tab1">
<div class="text-wrap">
<h2>High Quality</h2>
<ul class="">
<li class="">Three Levels of Screening </li>
<li class="">World-Class Service</li>
<li class="">Domain Expertise</li>
</ul>
</div>
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
#rapid .panel-default:hover .panel-title {
color: #01A759;
}
#rapid {
padding: 5% 0;
}
#rapid .panel-default:hover .panel-title {
color: #01A759;
}
#rapid .panel-default .panel-title * {
font: 300 25px/37px montserrat;
color: #7c7c7c;
}
#rapid .panel-default {
box-shadow: none;
border: none;
}
#rapid .carousel-indicators li h3:hover span, #rapid .carousel-indicators li.active h3 span{
font: 500 25px/37px montserrat;
color: #01A759;
transition: .5s;
}
#rapid .panel-default .panel-title span {
display: inline-block;
margin: 0 0 0 3rem;
transition: .5s;
}
#rapid .carousel-indicators li h3::before {
content: '';
background-image: url(../img/sprite.png);
width: 55px;
height: 45px;
display: inline-block;
float: left;
margin: 0 0px 0px auto;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: