<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://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1548372290-8d01b6c8e78c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1464746133101-a2c3f88e0dd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1552080084-f86b99bd1d29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1522529599102-193c0d76b5b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1465321897912-c692b37a09a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1440317539597-ad354a025165?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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://images.unsplash.com/photo-1481437642641-2f0ae875f836?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" 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: 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*/
});
