<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<section class="product-slider-section" id="team">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-custom gallery">
<div id="team-1" class="team-single"> <a href="https://i.ibb.co/4sFYjKT/Bella-Vista-Day-View-final1365.jpg"> <img src="https://i.ibb.co/4sFYjKT/Bella-Vista-Day-View-final1365.jpg" alt=""> </a> </div>
<div id="team-2" class="team-single active"> <a href="https://i.ibb.co/mCYZfnQ/forest-elevation-day-021.jpg"> <img src="https://i.ibb.co/mCYZfnQ/forest-elevation-day-021.jpg" alt=""> </a> </div>
<div id="team-3" class="team-single"> <a href="https://i.ibb.co/gr55TMx/1569828770-Indiabulls-Real-estate.jpg"> <img src="https://i.ibb.co/gr55TMx/1569828770-Indiabulls-Real-estate.jpg" alt=""> </a> </div>
<div id="team-4" class="team-single"> <a href="https://i.ibb.co/LP7rhdZ/bloombergquint-2019-10-60c8fd4e-451b-4fed-afef-caded880ac41-1.jpg"> <img src="https://i.ibb.co/LP7rhdZ/bloombergquint-2019-10-60c8fd4e-451b-4fed-afef-caded880ac41-1.jpg" alt=""> </a> </div>
<div id="team-5" class="team-single"> <a href="https://i.ibb.co/qr5dtJT/Getty-Images-942487282-ae2da73b74aa4e868af3a6beac662e52.jpg"> <img src="https://i.ibb.co/qr5dtJT/Getty-Images-942487282-ae2da73b74aa4e868af3a6beac662e52.jpg" alt=""> </a> </div>
<div id="team-6" class="team-single"> <a href="https://i.ibb.co/zZYxzNZ/new-gst-real-estate-rate-to-be-applicable-from-april-source-80-materials-from-registered-dealer.webp"> <img src="https://i.ibb.co/zZYxzNZ/new-gst-real-estate-rate-to-be-applicable-from-april-source-80-materials-from-registered-dealer.webp" alt=""> </a> </div>
</div>
<div class="team-list">
<ul class="slider-custom-2">
<li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".1s">
<a href="#team-1" data-team="team-1">
<figure>
<img src="https://i.ibb.co/4sFYjKT/Bella-Vista-Day-View-final1365.jpg" alt="Vintage Classicos">
</figure>
</a>
</li>
<li class="active wow zoomIn" data-wow-duration="1s" data-wow-delay=".3s">
<a href="#team-2" data-team="team-2">
<figure>
<img src="https://i.ibb.co/mCYZfnQ/forest-elevation-day-021.jpg" alt="Vintage Classicos">
</figure>
</a>
</li>
<li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".5s">
<a href="#team-3" data-team="team-3">
<figure>
<img src="https://i.ibb.co/gr55TMx/1569828770-Indiabulls-Real-estate.jpg" alt="Vintage Classicos">
</figure>
</a>
</li>
<li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".7s">
<a href="#team-4" data-team="team-4">
<figure>
<img src="https://i.ibb.co/LP7rhdZ/bloombergquint-2019-10-60c8fd4e-451b-4fed-afef-caded880ac41-1.jpg" alt="Vintage Classicos">
</figure>
</a>
</li>
<li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".5s">
<a href="#team-5" data-team="team-3">
<figure>
<img src="https://i.ibb.co/qr5dtJT/Getty-Images-942487282-ae2da73b74aa4e868af3a6beac662e52.jpg" alt="Vintage Classicos">
</figure>
</a>
</li>
<li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".7s">
<a href="#team-6" data-team="team-4">
<figure>
<img src="https://i.ibb.co/zZYxzNZ/new-gst-real-estate-rate-to-be-applicable-from-april-source-80-materials-from-registered-dealer.webp" alt="Vintage Classicos">
</figure>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
.product-slider-section{
background: linear-gradient(1deg, rgba(239, 239, 239, 0.4) 26%, rgb(245, 243, 255) 73%);
padding:70px 0;
}
#team .team-single {
border: 2px solid #d7a947;
margin: 0 auto;
padding: 0;
width: 100%;
display: none;
}
.effect-img {
padding: 180px 0;
background-size: cover;
text-align: center;
}
#team {
padding: 150px 0;
}
#fun-fact, #team {
background: #f6f7fe;
}
#team .team-section-text {
padding-top: 70px;
}
.section-count {
height: 120px;
overflow: hidden;
font-weight: 100;
}
.section-count>span {
color: #e6e9f4;
display: block;
font-size: 220px;
line-height: .7em;
}
.section-title {
color: #d7a946;
font-size: 48px;
font-weight: 300;
text-transform: capitalize;
margin-bottom: 20px;
}
.section-text>p {
margin-bottom: 15px;
}
#team {
padding: 80px 0
}
#team img{
width:100%;
}
#team .team-section-text {
padding-top: 70px
}
#team .team-single.active {
display: block
}
#team .team-list>ul {
list-style: none;
margin: 0;
padding: 0
}
#team .team-list>ul>li {
position: relative;
margin: 15px 0
}
#team .team-list>ul>li:first-child {
margin-top: 0
}
#team .team-list>ul>li:last-child {
margin-bottom: 0
}
#team .team-list>ul>li.active>a>figure:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgb(215 169 71 / 52%);
}
#team .team-list>ul>li.active::after {
color: #d7a946;
content: "\f30b";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-top: -10px;
position: absolute;
right: 0;
top: 50%
}
#team .team-list>ul>li>a>figure {
border-radius: 50%;
height: 100px;
overflow: hidden;
width: 100px;
position: relative
}
#team .team-info>h4 {
color: #3a3a3a;
font-size: 16px;
margin-bottom: 5px;
margin-top: 20px;
text-align: center
}
#team .team-img {
position: relative
}
#team .team-img>img {
width: 100%;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s
}
#team .team-social>ul {
bottom: 0;
list-style: none;
margin: 0 0 0 20px;
padding: 0;
position: absolute;
right: 30px;
opacity: 0;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s
}
#team .team-social>ul>li>a {
border-radius: 50%;
color: #d7a946;
display: block;
font-size: 18px;
height: 40px;
margin: 15px 5px;
padding: 8px;
position: relative;
text-align: center;
width: 40px;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s
}
#team .team-social>ul>li>a:hover {
background: #d7a946;
color: #fff
}
#team .team-social>ul>li>a::after {
border: 1px solid #dee3f4;
border-radius: 50%;
content: "";
height: 50px;
left: -5px;
position: absolute;
top: -5px;
width: 50px
}
#team .team-single:hover .team-img>img {
margin-left: -70px
}
#team .team-single:hover .team-social>ul {
opacity: 1;
right: 0
}
.team-section-text .heading-title h4 {
font-size: 45px;
}
.team-section-text .heading-title h3 {
font-size: 35px;
}
.slider-custom-2 figure img {
padding: 7px;
width: 100% !important;
height: 100px;
}
.team-list {
margin-top: 20px;
}
.owl-prev {
float: left;
position: absolute;
top: 25px;
left: 0;
background: #d7a946;
padding: 10px 5px;
color: #ffff;
}
.owl-next {
float: right;
position: absolute;
top: 25px;
right: 0;
background: #d7a946;
padding: 10px 5px;
color: #ffff;
}
.slider-custom .team-single img {
height: 500px;
}
$(document).ready(function(){
$(".slider-custom-2").owlCarousel({
items:5,
margin:15,
itemsDesktop:[1000,4],
itemsDesktopSmall:[979,3],
itemsTablet:[768,3],
pagination:false,
navigation:true,
navigationText:["<i class='fas fa-arrow-left'></i>","<i class='fas fa-arrow-right'></i>"],
autoPlay:true
});
});
$(document).ready(function() {
"use strict";
$(".team-list").on("click", "a", function(a) {
a.preventDefault();
var e = $(this).data("team");
$(".team-single").removeClass("active"), $(".team-list li").removeClass("active"), $("#" + e).addClass("active"), $(this).parent().addClass("active")
}); });
$(document).ready(function() {
// add all to same gallery
$(".gallery a").attr("data-fancybox","mygallery");
// assign captions and title from alt-attributes of images:
$(".gallery a").each(function(){
$(this).attr("data-caption", $(this).find("img").attr("alt"));
$(this).attr("title", $(this).find("img").attr("alt"));
});
// start fancybox:
$(".gallery a").fancybox();
});
