NiceSnippets.com
Our Team List Circle Image Slider Usign Easy Slide Jquery
Usign this 3D slider you can display image in circle with user profile list,customer list,company employee list,person thought list,teacher list,faculty list. in this slider we are display image,name,some description and his social icon with attach his social account. this slider call listing view slider. in this slider you can display multiple image in rounde shape.
We allows to free snippets of circular image slider using jquery , you can download full code of round image plugin slide jquery layout. Here in this post i will give you example of circle slider jquery free download snippet and you will get simple code of html, css and jquery. In jquery automatic image slider free download snippet i give you three tab with html, css and js, you can easily get code of bootstrap image slider with thumbnail layout.
<!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="//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="http://www.pvhc.net/img240/uyttxprhsqycyximpzjb.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 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>win desal</h3>
<P>SEO</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 class="next_button"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
<div class="prev_button"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
<div class="nav_indicators"></div>
</div>
</body>
</html>
*{
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: inline-block;
margin: 0 auto;
padding: 0;
}
.nav_indicators ul li {
display: inline-block;
width: 20px;
height: 20px;
margin: 10px;
padding: 0;
overflow: hidden;
background: #fff;
color: #fff;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
}
.nav_indicators ul li.active {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 10px;
padding: 0;
background: #555;
color: #555;
border: 2px solid #aaa;
}
.next_button,
.prev_button {
position: absolute;
left: 100%;
top: 50%;
transform: translateX(-50%);
cursor: pointer;
color:#c2c2c2;
}
.prev_button {
position: absolute;
left: 0%;
}
.next_button:hover,
.prev_button:hover {
opacity: 1;
}
$(document).ready(function() {
$('.slider_circle_10').EasySlides({'autoplay': true, 'show': 5})
});
