<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card hovercard">
<div class="cardheader">
<div class="skill">1 IOS Developer</div>
<div class="jobApply">
<a class="btn blue btn-sm" href="#">Apply</a>
</div>
</div>
<div class="info">
<div class="title">
3 - 5 years
</div>
<div class="desc">DU5</div>
<div class="desc text-uppercase"><strong> TIMES INTERNET
LIMITED</strong></div>
<div class="desc showmore">
<strong>Sr. Developer (Spring)</strong><br>
Peoplesoft HCM Technical : Need a Workday resource who can
handle below responsibilities:- ? BP guide, BP correction,
rescind (All modules)? EIB User template fill-in, mass
uploading (All modules)? MOM operation as an administrator
(T&P)? Upload new contents (questionnaire, onboarding etc.)
(Recruiting)? Update pay range per compensation grade
profile etc. (Comp.)? The 3rd vendor Integration Support
(Comp.)? Deal with errors regarding access to GHRP(W)?
Support Report Writer training, and manage security (Report)
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card hovercard">
<div class="cardheader">
<div class="skill">2 AI(Artificial Intelligence)</div>
<div class="jobApply">
<a class="btn blue btn-sm" href="#">Apply</a>
</div>
</div>
<div class="info">
<div class="title">
3 - 5 years
</div>
<div class="desc">DU5</div>
<div class="desc text-uppercase"><strong> TIMES INTERNET
LIMITED</strong></div>
<div class="desc showmore">
<strong>Sr. Developer (Spring)</strong><br>
UI/UX Development : Perform & Present all aspects of
research studies like study of design, instrument
development, collection & management of data (both desktop &
in the field), quantitative & qualitative data analysis,
reporting, dissemination & communication with partnersCreate
actionable insights for improving products & services based
on results of internal/external researchServe as a
'repository' of research-based usability knowledgeSupport
implementation of new technologies to facilitate user
research
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card hovercard">
<div class="cardheader">
<div class="skill">3 IOS Developer</div>
<div class="jobApply">
<a class="btn blue btn-sm" href="#">Apply</a>
</div>
</div>
<div class="info">
<div class="title">
3 - 5 years
</div>
<div class="desc">DU5</div>
<div class="desc text-uppercase"><strong> TIMES INTERNET
LIMITED</strong></div>
<div class="desc showmore">
<strong>Sr. Developer (Spring)</strong><br>
ASP.Net : Look for a candidate in the highest exp. bucket
(close to 5 years)ASP.Net/SQL Server, C# Sr. developers
with understanding and willing to work on Angular 2, 4.
Must have excellent communication and documentation skills
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card hovercard">
<div class="cardheader">
<div class="skill">4 IOS Developer</div>
<div class="jobApply">
<a class="btn blue btn-sm" href="#">Apply</a>
</div>
</div>
<div class="info">
<div class="title">
3 - 5 years
</div>
<div class="desc">DU5</div>
<div class="desc text-uppercase"><strong> TIMES INTERNET
LIMITED</strong></div>
<div class="desc showmore">
<strong>Sr. Developer (Spring)</strong><br>
ASP.Net : Look for a candidate in the highest exp. bucket
(close to 5 years)ASP.Net/SQL Server, C# Sr. developers
with understanding and willing to work on Angular 2, 4.
Must have excellent communication and documentation skills
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card hovercard">
<div class="cardheader">
<div class="skill">5 IOS Developer</div>
<div class="jobApply">
<a class="btn blue btn-sm" href="#">Apply</a>
</div>
</div>
<div class="info">
<div class="title">
3 - 5 years
</div>
<div class="desc">DU5</div>
<div class="desc text-uppercase"><strong> TIMES INTERNET
LIMITED</strong></div>
<div class="desc showmore">
<strong>Sr. Developer (Spring)</strong><br>
ASP.Net : Look for a candidate in the highest exp. bucket
(close to 5 years)ASP.Net/SQL Server, C# Sr. developers
with understanding and willing to work on Angular 2, 4.
Must have excellent communication and documentation skills
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card hovercard">
<div class="cardheader">
<div class="skill">6 IOS Developer</div>
<div class="jobApply">
<a class="btn blue btn-sm" href="#">Apply</a>
</div>
</div>
<div class="info">
<div class="title">
3 - 5 years
</div>
<div class="desc">DU5</div>
<div class="desc text-uppercase"><strong> TIMES INTERNET
LIMITED</strong></div>
<div class="desc showmore">
<strong>Sr. Developer (Spring)</strong><br>
ASP.Net : Look for a candidate in the highest exp. bucket
(close to 5 years)ASP.Net/SQL Server, C# Sr. developers
with understanding and willing to work on Angular 2, 4.
Must have excellent communication and documentation skills
</div>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
// Less More Content
var showChar = 290;
var ellipsestext = "...";
var moretext = "Read more";
var lesstext = "Show less";
$('.showmore').each(function () {
var content = $(this).html();
if (content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
</script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 25,
loop: true,
slidesPerGroup: 4,
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
// init: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
1024: {
slidesPerView: 2,
slidesPerGroup: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
slidesPerGroup: 2,
spaceBetween: 20,
},
640: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 20,
},
320: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 10,
}
}
});
$(document).ready(function () {
var mySwiper = document.querySelector('.swiper-container').swiper
$(".swiper-container").mouseenter(function () {
mySwiper.autoplay.stop();
});
$(".swiper-container").mouseleave(function () {
mySwiper.autoplay.start();
});
});
</script>
</body>
</html>
.swiper-container {
width: 98%;
height: 100%;
}
.swiper-slide {
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
right:1px;
width: 30px;
height: 30px;
/* background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23333333'%2F%3E%3C%2Fsvg%3E") !important;*/
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white{
left:1px;
width: 30px;
height: 30px;
/* background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23333333'%2F%3E%3C%2Fsvg%3E") !important;*/
}
/* card */
.card {
padding-top: 20px;
margin:0;
background-color: rgba(214, 224, 226, 0.2);
border-width: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.people .card-bottom {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 100%;
padding: 10px 20px;
line-height: 29px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background:linear-gradient(0deg, #424cd7 0, #6e42d7 100%);
min-height: 274px;
width:100%;
}
.card.hovercard .cardheader {
background:#3842d2;
background-size: cover;
padding:25px 5px;
font-size: 18px;
/* display: flex;
align-items: center;
justify-content: center;*/
height: 77px;
position: relative;
}
.card.hovercard .cardheader .skill{
position: absolute;
top: 50%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
color:#ffffff;
}
.card.hovercard .cardheader .jobApply {
position: absolute;
bottom: -15px;
top: auto;
left:47%;
text-align: center;
}
.card.hovercard .cardheader .jobApply a{
text-align: center;
background-color: #ee0979;
border-color: #ee0979;
color:#ffffff;
border-radius:500px;
padding:5px 15px;
}
.card.hovercard .info {
padding: 4px 8px 10px;
}
.card.hovercard .info .title {
margin-top: 15px;
font-size: 16px;
line-height: 30px;
color:#c8e7ff;
vertical-align: middle;
}
.card.hovercard .info .desc {
overflow: hidden;
font-size: 11px;
line-height: 20px;
color:#c8e7ff;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 100%;
padding: 10px 20px;
line-height: 29px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* close card */
/* less more */
.morecontent span {
display: none;
}
.morelink {
display: block;
color: #FFEB3B !important;
}
