<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 ---------->
<div class="spe-cor">
<div class="container">
<h4 class="title">Special Correspondent</h4>
<div id="spe-cor" class="carousel carousel-correspondence slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/12006196_871333922960032_6467738435395255683_n.jpg?oh=42fba127aee2723869f582c22a95ced4&oe=592BE933" alt="Himanshu Daudia">
<div class="caption">
<h3><a href="https://www.facebook.com/himanshu.daudia" target="_blank">Himanshu Daudia</a></h3>
<p class="cate-para">
<a href="#" class="cate">Front End</a>
<a href="#" class="cate">HTML</a>
<a href="#" class="cate">CSS</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/16114839_1187985094588252_4488136853110433860_n.jpg?oh=f8fcb163a33ef0ad0fa282cd96d6f3ff&oe=593D0246" alt="Hiren Sojitra">
<div class="caption">
<h3><a href="https://www.facebook.com/SOJITRAHIREN/" target="_blank">Hiren Sojitra</a></h3>
<p class="cate-para">
<a href="#" class="cate">Photoshop</a>
<a href="#" class="cate">Bootstrap</a>
<a href="#" class="cate">jQuery</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/12246989_1187786317949933_3555110425875159096_n.jpg?oh=51141adcad42f5cf9634a61106a294b0&oe=593EE518" alt="Navghan Modhvadiya">
<div class="caption">
<h3><a href="https://www.facebook.com/nav.modhwadiya" target="_blank">Navghan Modhvadiya</a></h3>
<p class="cate-para">
<a href="#" class="cate">Photoshop</a>
<a href="#" class="cate">HTML</a>
<a href="#" class="cate">CSS</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/16807774_1204523106283336_764844483080233533_n.jpg?oh=2bfc2fdb01915b32ff7dee765960d80d&oe=59267A89" alt="Ravi Patel">
<div class="caption">
<h3><a href="https://www.facebook.com/profile.php?id=100001769743803" target="_blank">Ravi Patel</a></h3>
<p class="cate-para">
<a href="#" class="cate">PHP</a>
<a href="#" class="cate">Wordpress</a>
<a href="#" class="cate">Drupal</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/15380403_1275044815889039_5043143273854250873_n.jpg?oh=724d07fdcda10f209533fc670c7758d6&oe=593283A4" alt="Hitesh Mandali">
<div class="caption">
<h3><a href="https://www.facebook.com/hitesh.mandli" target="_blank">Hitesh Mandli</a></h3>
<p class="cate-para">
<a href="#" class="cate">PHP</a>
<a href="#" class="cate">Wordpress</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/16708340_1553946241300911_2366961003767400773_n.jpg?oh=2d473e430ec1a420da567b7807292855&oe=59353F67" alt="Deepak Kumar">
<div class="caption">
<h3><a href="https://www.facebook.com/kumardeepakg123" target="_blank">Deepak Kumar</a></h3>
<p class="cate-para">
<a href="#" class="cate">SEO</a>
<a href="#" class="cate">Ctrl+C</a>
<a href="#" class="cate">Ctrl+V</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/c28.0.160.160/p160x160/16299519_1406031059469398_8711728725159103001_n.jpg?oh=2387857f136c9731c3d906a1536b71f8&oe=593367BE" alt="Mehul Nishad">
<div class="caption">
<h3><a href="https://www.facebook.com/mehul.nishad.007" traget="_blank">Mehul Nishad</a></h3>
<p class="cate-para">
<a href="#" class="cate">PHP</a>
<a href="#" class="cate">Wordpress</a>
<a href="#" class="cate">Drupal</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/10888818_751041564985761_2238236543543940049_n.jpg?oh=7d13c5c7813cf14aaaccde929cf764f7&oe=593B1300" alt="Brijesh Parmar">
<div class="caption">
<h3><a href="https://www.facebook.com/brijesh.parmar.369" target="_blank">Brijesh Parmar</a></h3>
<p class="cate-para">
<a href="#" class="cate">PHP</a>
<a href="#" class="cate">Drupal</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/c1.0.629.629/s240x240/389635_429653850407943_1285076876_n.jpg?oh=40d192a2bd4a6a14c6d5c350912ffe54&oe=59455AD2" alt="Sunil Kabra">
<div class="caption">
<h3><a href="https://www.facebook.com/sunil.kabra.127" target="_blank">Sunil Kabra</a></h3>
<p class="cate-para">
<a href="#" class="cate">Admin</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="controls">
<a class="left carousel-control" href="#spe-cor" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="right carousel-control" href="#spe-cor" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
<!-- End Carousel -->
</div>
</div>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/*================================================*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
/*Special Corresponds*/
.spe-cor {
position: relative;
background: #FFF;
}
.spe-cor .carousel-correspondence [class*="cloneditem-"] {
display: none;
}
.spe-cor .carousel-inner {
margin-bottom: 20px;
}
.spe-cor h4.title {
padding-top: 25px;
padding-bottom: 10px;
}
.spe-cor .thumbnail img {
border-radius: 50%;
border: 1px solid #DDD;
}
.spe-cor .thumbnail {
margin-bottom: 0;
border-radius: 0;
padding: 10px;
height: auto;
position: relative;
border: none;
overflow: hidden;
}
.spe-cor .thumbnail:hover, .spe-cor .thumbnail:active, .spe-cor .thumbnail:focus {
background: #FFF;
}
.spe-cor .thumbnail:after {
content: '';
background: #005fb1;
position: absolute;
height: 5px;
width: 100%;
left: calc(100% + 10px);
bottom: 0;
-webkit-transition: 0.5s; /* Safari */
transition: 0.5s;
-moz-transition: 0.5s;
}
.spe-cor .thumbnail:hover:after, .spe-cor .thumbnail:active:after, .spe-cor .thumbnail:focus:after {
left: 0%;
-webkit-transition: 1s; /* Safari */
transition: 1s;
-moz-transition: 1s;
}
.spe-cor .thumbnail .caption {
padding: 0;
}
.spe-cor .thumbnail .caption h3 {
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
line-height: 0.8;
}
.spe-cor .thumbnail .caption h3 > a {
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #555;
line-height: 0.8;
text-transform: uppercase;
}
.spe-cor .thumbnail .caption h3 > a:hover, .spe-cor .thumbnail .caption h3 > a:active, .spe-cor .thumbnail .caption h3 > a:focus {
color: #005fb1;
text-decoration: none;
}
.spe-cor .thumbnail .caption p.cate-para {
margin-bottom: 0px;
text-align: center;
}
.spe-cor .thumbnail .caption p.cate-para > a, .spe-cor .thumbnail .caption p.cate-para > a {
font-size: 14px;
font-family: 'Roboto', sans-serif;
color: rgb(102, 102, 102);
line-height: 1.2;
text-align: left;
}
.spe-cor .thumbnail .caption p.cate-para > a:hover, .spe-cor .thumbnail .caption p.cate-para > a:focus, .spe-cor .thumbnail .caption p.cate-para > a:active {
color: #cc0000;
text-decoration: none;
}
.spe-cor .thumbnail .caption span.date, .spe-cor .thumbnail .caption span.comment {
margin-bottom: 0;
}
.carousel-correspondence .carousel-control.left, .carousel-correspondence .carousel-control.right, .carousel-video-thumb .carousel-control.left, .carousel-video-thumb .carousel-control.right {
background-image: none !important;
color: #c0c0c0;
height: 35px;
width: 35px;
border-style: solid;
border-width: 1px;
border-color: rgb(224, 224, 224);
background-color: rgb(245, 245, 245);
margin: 0;
}
.carousel-correspondence .carousel-control.left:hover, .carousel-correspondence .carousel-control.right:hover, .carousel-video-thumb .carousel-control.left:hover, .carousel-video-thumb .carousel-control.right:hover {
color: #FFF;
background: #C00;
}
.carousel-correspondence .controls, .carousel-video-thumb .controls {
padding: 0;
margin: 0;
position: absolute;
width: 75px;
padding-right: 15px;
padding-left: 15px;
background: none;
top: 0;
right: 0;
margin-top: -40px;
height: 35px;
}
.carousel-correspondence .carousel-control, .carousel-video-thumb .carousel-control {
color: #fff;
padding: 0px;
padding-top: 3px;
color: #428BCA;
bottom: auto;
width: 35px;
height: 35px;
text-shadow: none;
opacity: 1;
top: 0;
}
.carousel-correspondence .carousel-control:hover, .carousel-video-thumb .carousel-control:hover {
color: #d9534f;
}
.carousel-correspondence .carousel-control.left, .carousel-correspondence .carousel-control.right, .carousel-video-thumb .carousel-control.left, .carousel-video-thumb .carousel-control.right {
background-image: none !important;
}
.carousel-correspondence .carousel-control.right, .carousel-video-thumb .carousel-control.right {
left: auto;
}
.carousel-correspondence .carousel-control.left, .carousel-video-thumb .carousel-control.left {
right: auto;
}
.carousel-correspondence .carousel-indicators, .carousel-video-thumb .carousel-indicators {
bottom: -30px;
}
.carousel-correspondence .carousel-indicators li, .carousel-video-thumb .carousel-indicators li {
border-radius: 0;
width: 10px;
height: 10px;
background: #ccc;
border: 1px solid #ccc;
}
.carousel-correspondence .carousel-indicators .active, .carousel-video-thumb .carousel-indicators .active {
width: 12px;
height: 12px;
background: #3276b1;
border-color: #3276b1;
}
/*================================================*/
/*Correspondece Slider*/
@media all and (min-width:768px) {
.carousel-correspondence .carousel-inner > .active.left, .carousel-correspondence .carousel-inner > .prev {
left: -50%;
}
.carousel-correspondence .carousel-inner > .active.right, .carousel-correspondence .carousel-inner > .next {
left: 50%;
}
.carousel-correspondence .carousel-inner > .left, .carousel-correspondence .carousel-inner > .prev.right, .carousel-correspondence .carousel-inner > .active {
left: 0;
}
.carousel-correspondence .carousel-inner .cloneditem-1, .carousel-correspondence .carousel-inner .cloneditem-2 {
display: block;
}
}
@media all and (min-width:768px) and (transform-3d), all and (min-width:768px) and (-webkit-transform-3d) {
.carousel-correspondence .carousel-inner > .item.active.right, .carousel-correspondence .carousel-inner > .item.next {
-webkit-transform: translate3d(33.333%, 0, 0);
transform: translate3d(33.33%, 0, 0);
left: 0;
}
.carousel-correspondence .carousel-inner > .item.active.left, .carousel-correspondence .carousel-inner > .item.prev {
-webkit-transform: translate3d(-33.333%, 0, 0);
transform: translate3d(-33.333%, 0, 0);
left: 0;
}
.carousel-correspondence .carousel-inner > .item.left, .carousel-correspondence .carousel-inner > .item.prev.right, .carousel-correspondence .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width:992px) and (max-width:1200px) {
.carousel-correspondence .carousel-inner > .active.left, .carousel-correspondence .carousel-inner > .prev {
left: -25%;
}
.carousel-correspondence .carousel-inner > .active.right, .carousel-correspondence .carousel-inner > .next {
left: 25%;
}
.carousel-correspondence .carousel-inner > .left, .carousel-correspondence .carousel-inner > .prev.right, .carousel-correspondence .carousel-inner > .active {
left: 0;
}
.carousel-correspondence .carousel-inner .cloneditem-2, .carousel-correspondence .carousel-inner .cloneditem-3 {
display: block;
}
}
@media all and (min-width:992px) and (transform-3d), all and (min-width:992px) and (-webkit-transform-3d) {
.carousel-correspondence .carousel-inner > .item.active.right, .carousel-correspondence .carousel-inner > .item.next {
-webkit-transform: translate3d(16.666%, 0, 0);
transform: translate3d(25%, 0, 0);
left: 0;
}
.carousel-correspondence .carousel-inner > .item.active.left, .carousel-correspondence .carousel-inner > .item.prev {
-webkit-transform: translate3d(-16.666%, 0, 0);
transform: translate3d(-25%, 0, 0);
left: 0;
}
.carousel-correspondence .carousel-inner > .item.left, .carousel-correspondence .carousel-inner > .item.prev.right, .carousel-correspondence .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width:1200px) {
.carousel-correspondence .carousel-inner > .active.left, .carousel-correspondence .carousel-inner > .prev {
left: -16.666667%;
}
.carousel-correspondence .carousel-inner > .active.right, .carousel-correspondence .carousel-inner > .next {
left: 16.666667%;
}
.carousel-correspondence .carousel-inner > .left, .carousel-correspondence .carousel-inner > .prev.right, .carousel-correspondence .carousel-inner > .active {
left: 0;
}
.carousel-correspondence .carousel-inner .cloneditem-2, .carousel-correspondence .carousel-inner .cloneditem-3, .carousel-correspondence .carousel-inner .cloneditem-4, .carousel-correspondence .carousel-inner .cloneditem-5, .carousel-correspondence .carousel-inner .cloneditem-6 {
display: block;
}
}
@media all and (min-width:1200px) and (transform-3d), all and (min-width:1200px) and (-webkit-transform-3d) {
.carousel-correspondence .carousel-inner > .item.active.right, .carousel-correspondence .carousel-inner > .item.next {
-webkit-transform: translate3d(16.666667%, 0, 0);
transform: translate3d(16.666667%, 0, 0);
left: 0;
}
.carousel-correspondence .carousel-inner > .item.active.left, .carousel-correspondence .carousel-inner > .item.prev {
-webkit-transform: translate3d(-16.666667%, 0, 0);
transform: translate3d(-16.666667%, 0, 0);
left: 0;
}
.carousel-correspondence .carousel-inner > .item.left, .carousel-correspondence .carousel-inner > .item.prev.right, .carousel-correspondence .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
/*Correspondece Slider Ends*/
$(document).ready(function() {
/*Correspondence Slider*/
$('.carousel-correspondence .item').each(function() {
var itemToClone = $(this);
for (var i = 1; i < 6; i++) {
itemToClone = itemToClone.next();
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
itemToClone.children(':first-child').clone()
.addClass("cloneditem-" + (i))
.appendTo($(this));
}
});
/*Correspondence Slider*/
});
