<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Team Slider - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://themeebit.com/demos/html/materialab-v2.01/css/owl.carousel.css" rel="stylesheet prefetch">
</head>
<body>
<!-- ====START OUR TEAM AREA==== -->
<section class="our_team">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="section_title mb80">
<h5 class="smallHd text-center">meet with the</h5>
<h2 class="secHd text-center">crazy team</h2>
</div>
</div>
</div>
<div class="row team_details_area">
<div class="col-xs-12 col-sm-6 fix_p">
<div class="team_content">
<div class="team_cotent_slid">
<div class="item">
<h1>Timothy<br>Dean</h1>
<h6>Creative Director</h6>
<p>If you’ve followed along and done the steps above, you’ve created good starting place. You’re going to need to make sure your pages are optimized properly. This will ensure you get your page ranked high in the search engines.</p>
<ul class="team_social">
<li>
<a href="#!">
<i class="zmdi zmdi-facebook btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-twitter btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-dribbble btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-behance btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-pinterest btn waves-effect"></i>
</a>
</li>
</ul>
<a class="th_bt btn waves-effect waves-light" href="#!">Learn More
<i class="zmdi zmdi-long-arrow-right"></i>
</a>
</div>
<div class="item">
<h1>Ralph <br>Ramirez</h1>
<h6>Creative Director</h6>
<p>If you’ve followed along and done the steps above, you’ve created good starting place. You’re going to need to make sure your pages are optimized properly. This will ensure you get your page ranked high in the search engines.</p>
<ul class="team_social">
<li>
<a href="#!">
<i class="zmdi zmdi-facebook btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-twitter btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-dribbble btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-behance btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-pinterest btn waves-effect"></i>
</a>
</li>
</ul>
<a class="th_bt btn waves-effect waves-light" href="#!">Learn More
<i class="zmdi zmdi-long-arrow-right"></i>
</a>
</div>
<div class="item">
<h1>Alexander<br>Harper</h1>
<h6>Creative Director</h6>
<p>If you’ve followed along and done the steps above, you’ve created good starting place. You’re going to need to make sure your pages are optimized properly. This will ensure you get your page ranked high in the search engines.</p>
<ul class="team_social">
<li>
<a href="#!">
<i class="zmdi zmdi-facebook btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-twitter btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-dribbble btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-behance btn waves-effect"></i>
</a>
</li>
<li>
<a href="#!">
<i class="zmdi zmdi-pinterest btn waves-effect"></i>
</a>
</li>
</ul>
<a class="th_bt btn waves-effect waves-light" href="#!">Learn More
<i class="zmdi zmdi-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 fix_p_r">
<div class="team_member_photo">
<div class="team_slid">
<div class="item waves-effect">
<img src="https://s19.postimg.org/e4p16a86b/team_member_1.jpg" alt="">
<div class="memberPhoto_border bg1"></div>
<div class="memberPhoto_border bg2"></div>
<div class="memberPhoto_border bg3"></div>
<div class="memberPhoto_border bg4"></div>
</div>
<div class="item waves-effect">
<img src="https://s19.postimg.org/e4p16a86b/team_member_1.jpg" alt="">
<div class="memberPhoto_border bg1"></div>
<div class="memberPhoto_border bg2"></div>
<div class="memberPhoto_border bg3"></div>
<div class="memberPhoto_border bg4"></div>
</div>
<div class="item waves-effect">
<img src="https://s19.postimg.org/e4p16a86b/team_member_1.jpg" alt="">
<div class="memberPhoto_border bg1"></div>
<div class="memberPhoto_border bg2"></div>
<div class="memberPhoto_border bg3"></div>
<div class="memberPhoto_border bg4"></div>
</div>
</div>
<div class="teamslide_nav">
<i class="zmdi zmdi-long-arrow-left testi_prev"></i>
<i class="zmdi zmdi-long-arrow-right testi_next"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====START OUR TEAM AREA==== -->
<script src="http://themeebit.com/demos/html/materialab-v2.01/js/owl.carousel.min.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>-->
</body>
</html>
.our_team {
overflow: hidden;
padding: 120px 0 0;
}
.team_content {
background: #2962ff none repeat scroll 0 0;
padding-bottom: 120px;
padding-right: 17%;
padding-top: 107px;
position: relative;
}
.team_content h1 {
color: #fff;
font-weight: 700;
letter-spacing: 1px;
line-height: 48px;
text-transform: uppercase;
}
.team_content h6 {
color: #f7f6f6;
font-family: "Merriweather",serif;
font-size: 12px;
font-style: italic;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.team_content p {
color: #eeeeee;
margin: 41px 0;
}
ul.team_social {
margin-bottom: 48px;
}
ul.team_social li, ul.share_social li {
display: inline-block;
}
ul.team_social li a i, ul.share_social li a i {
background-color: transparent;
border-radius: 50%;
box-shadow: none;
color: #fff;
font-size: 16px;
height: 32px;
line-height: 32px;
margin: 0;
padding: 0;
text-align: center;
width: 32px;
}
ul.team_social li a:hover i {
background: #fff none repeat scroll 0 0;
color: #2962ff;
}
.team_content a.th_bt {
margin: 0;
width: 190px;
}
.team_content::before {
background: #2962ff none repeat scroll 0 0;
content: "";
height: 100%;
position: absolute;
right: -115px;
top: 0;
width: 10000%;
z-index: -1;
}
.team_member_photo {
position: relative;
z-index: 9;
}
.team_member_photo .item {
position: relative;
}
.team_member_photo .memberPhoto_border {
height: 90%;
left: 4%;
position: absolute;
top: 5%;
width: 92%;
}
.team_member_photo .bg1 {
background: #ffffff none repeat scroll 0 0;
height: 1px;
width: 0;
}
.team_member_photo .bg2 {
background: #ffffff none repeat scroll 0 0;
height: 1px;
top: 95%;
width: 0;
}
.team_member_photo .bg3 {
background: #ffffff none repeat scroll 0 0;
height: 0;
width: 1px;
}
.team_member_photo .bg4 {
background: #ffffff none repeat scroll 0 0;
height: 0;
left: 95%;
width: 1px;
}
.team_member_photo:hover .bg1 {
width: 91%;
}
.team_member_photo:hover .bg2 {
width: 91%;
}
.team_member_photo:hover .bg3 {
height: 90%;
}
.team_member_photo:hover .bg4 {
height: 90%;
}
.team_member_photo::before {
background: #2962ff none repeat scroll 0 0;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
content: "";
height: calc(100% + 150px);
left: -100px;
position: absolute;
top: -75px;
width: calc(100% + 200px);
z-index: -1;
}
.team_details_area > div.col-sm-6 {
display: inline-block;
float: none;
margin-right: -3px;
vertical-align: middle;
}
.teamslide_nav {
left: -56px;
position: absolute;
top: calc(50% - 15px);
width: calc(100% + 106px);
}
.teamslide_nav .testi_prev, .teamslide_nav .testi_next {
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 24px;
height: 30px;
line-height: 30px;
text-align: center;
width: 30px;
}
.teamslide_nav .testi_next, .clientslide_nav .testi_next, .home-4 .main_slider_nav .testi_next, .home-6 .main_slider_nav .testi_next, ul.sidebarList a .list_right {
float: right;
}
.team_member_photo .owl-dots {
bottom: -48.5px;
left: calc(50% - 34px);
position: absolute;
text-align: center;
}
.team_member_photo .owl-dot {
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
height: 12px;
margin-right: 10px;
width: 12px;
}
.team_member_photo .owl-dot.active {
border-width: 3px;
}
// team Content
var team_slid2 = $('.team_cotent_slid');
team_slid2.owlCarousel({
loop: true,
margin: 30,
autoplay: false,
dots: true,
animateIn: 'fadeInDown',
animateOut: 'fadeOutDown',
responsive: {
0: {
items: 1
},
600: {
items: 1
},
992: {
items: 1
}
}
});
// team image
var team_slid = $('.team_slid');
team_slid.owlCarousel({
loop: true,
margin: 30,
dots: true,
mouseDrag: true,
touchDrag: false,
animateIn: 'fadeInLeft',
animateOut: 'fadeOutRight',
responsive: {
0: {
items: 1
},
600: {
items: 1
},
992: {
items: 1
}
}
});
$('.teamslide_nav .testi_next').on('click', function () {
team_slid.trigger('next.owl.carousel');
});
$('.teamslide_nav .testi_prev').on('click', function () {
team_slid.trigger('prev.owl.carousel');
});
team_slid.on('translate.owl.carousel', function (property) {
$('.team_content .owl-dot:eq(' + property.page.index + ')').click();
});
team_slid2.on('translate.owl.carousel', function (property) {
$('.team_member_photo .owl-dot:eq(' + property.page.index + ')').click();
});
});
