Our Team List Circle Image Slider Usign Easy Slide Jquery

by Andrey Izman

HTML

<!DOCTYPE html>
<html>
<head>
<link href="easy_slide.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://nicesnippets.com/demo/easy_slide.js"></script>
</head>
<body>
<div class="slider slider_circle_10">
<div>
<div class="img"><img src="https://cdn0.iconfinder.com/data/icons/user-pictures/100/matureman1-512.png"></div>
<div class="slider-desc">
<h3>Team Coock</h3>
<P>Designer</P>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
<div>
<div class="img"><img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/supportmale-512.png"></div>
<div class="slider-desc">
<h3>Justine trodu</h3>
<P>Developer</P>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
<div>
<div class="img"><img src="https://t4.ftcdn.net/jpg/01/59/44/71/160_F_159447194_oZfyvVr9yDPISGzWfcDpYRQzb6gXy29c.jpg"></div>
<div class="slider-desc">
<h3>mike hanrik</h3>
<P>Graphic Designer</P>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
<div>
<div class="img"><img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png"></div>
<div class="slider-desc">
<h3>jef load</h3>
<P>Interior Designer</P>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa...

CSS

*{
font-family: 'Saira Condensed', sans-serif;
background-color: #F4D5D9;
}
.slider_circle_10{
position:relative;
width:600px;
margin: 0 auto;
user-select: none;
height:550px;
}
.slider_circle_10 div img{
width:100%;
}
.slider_circle_10 .slider-desc{
position:absolute;
bottom:55px;
display:none;
width:100%;
text-align: center;
}
.slider_circle_10 .active .slider-desc{
display: block;
}
.slider_circle_10 .slider-desc h3{
font-size:25px;
font-weight:800;
margin:30px 0px -10px 0px;
text-transform:uppercase;
}
.slider_circle_10 .slider-desc p{
font-size:20px;
color:#a2a2a2;
margin:5px 0px 5px 0px;
}
.slider_circle_10 .slider-desc a i{
font-size: 20px;
padding-left:10px;
color:#7B8D8E;
text-align: center;
padding:10px;
height:15px;
width:15px;
margin:0px 5px;
}
.slider_circle_10 > div .img{
border-radius: 50%;
background: #fff;
text-align: center;
box-sizing: border-box;
box-shadow: 0px 0px 25px #000;
}
.slider_circle_10 > div .img,
.slider_circle_10 .hidden .img{
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
z-index: 0;
overflow: hidden;
transform: translate(-50%, -50%);
}
.slider_circle_10 .active .img{
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
z-index: 10;
}
.slider_circle_10 .prev1 .img,
.slider_circle_10 .next1 .img{
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -120px;
width: 150px;
height: 150px;
z-index: 9;
}
.slider_circle_10 .next1 .img{
margin-left: 120px;
}
.slider_circle_10 .prev2 .img,
.slider_circle_10 .next2 .img{
opacity: 0.7;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -220px;
width: 100px;
height: 100px;
z-index: 8;
padding-top:-100px;
}
.slider_circle_10 .next2 .img{
margin-left: 220px;
}
.nav_indicators {
position: absolute;
bottom:0px;
left: 0px;
width: 100%;
text-align: center;
z-index: 50000;
}
.nav_indicators ul {
display:...

JavaScript

$(document).ready(function() {
$('.slider_circle_10').EasySlides({'autoplay': true, 'show': 5})
});