"Swiper Group Slider "
Bootstrap 4.1.1 Snippet by subhash4web

<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; }

Related: See More


Questions / Comments: