垂直滑动滑块：内容中心对齐
Vertical Slick slider: Content center align

 $(document).ready(function(){ $('.featured_jobs').slick({ vertical: true, centerMode: true, infinite: true, slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, pauseOnHover: true, responsive: [{ breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 520, settings: { slidesToShow: 1 } }] }); }); 

 /* Slider */ .slick-slide {margin: 0px 20px;} .slick-slide img {width: 100%;} .slick-slider{position: relative;display: block;box-sizing: border-box;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;} .slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;} .slick-list:focus{outline: none;} .slick-list.dragging{cursor: pointer;cursor: hand;} .slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);margin-top: 1em;margin-bottom: 1em} .slick-track{position: relative;top: 0;left: 0;display: b} .slick-track:before,.slick-track:after{display: table;content: '';} .slick-track:after{clear: both;} .slick-loading .slick-track{visibility: hidden;} .slick-slide{display: none;float: left;height: 100%;min-height: 1px;margin-top: 1em;} [dir='rtl'] .slick-slide{float: right;} .slick-slide img{display: block;} .slick-slide.slick-loading img{display: none;} .slick-slide.dragging img{pointer-events: none;} .slick-initialized .slick-slide{display: block;} .slick-loading .slick-slide{visibility: hidden;} .slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent;} .slick-arrow.slick-hidden {display: none;} .slick-prev, .slick-next {font-size: 0;line-height: 0;position: absolute;top: 50%;display: block;width: 20px;height: 20px;padding: 0;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);cursor: pointer;color: transparent;border: none;outline: none;background: transparent;} .slick-prev {left: -25px;} .slick-next {right: -25px;} .slick-prev:before, .slick-next:before {font-family: 'ElegantIcons';font-size: 20px;line-height: 1;opacity: .75;color: #424b59;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .slick-prev:before {content: '\\e045';} .slick-next:before {content: '\\e046';} .slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color: transparent;outline: none;background: transparent;} .slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity: 1;} .slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity: .25;} .slick-dotted.slick-slider{margin-bottom: 30px;} .slick-dots{position: absolute;bottom: -25px;display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;} .slick-dots li{position: relative;display: inline-block;width: 20px;height: 20px;margin: 0 5px;padding: 0;cursor: pointer;} .slick-dots li button{font-size: 0;line-height: 0;display: block;width: 20px;height: 20px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;} .slick-dots li button:hover,.slick-dots li button:focus{outline: none;} .slick-dots li button:hover:before, .slick-dots li button:focus:before{opacity: 1;} .slick-dots li button:before{font-size: 35px;line-height: 20px;position: absolute;top: 0;left: 0;width: 20px;height: 20px;content: '•';text-align: center;opacity: .25;color: #424b59;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .slick-dots li.slick-active button:before{opacity: .75;color: #c2b697;font-size: 50px;} .container{position: relative;width: 80%;max-width: 1170px;margin: 0 auto;} .bg_search{background-color: #eee;} .bg_search > div{padding-top: 6em;max-width: 300px;} /* Job Listing */ .job-list{width: 100%;position: relative;padding: 0;} .listing{border-radius: .3em; padding: 1em;margin-bottom: 1em;position:relative;display: table;width: 100%;box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);background-color: #ffffff;z-index: 1;cursor: pointer;} .listing:hover{transform: scale(1.08);transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;} .job {display: inline-block;vertical-align: middle;font-size: .9em;} .job > div {display: inline-block;padding: 0.6em 1em 0px 0px;} .job-list-type-perm{display: table-cell;vertical-align: middle;} .job-list-type-perm span{border: 2px solid #c2b697;padding: .625em;border-radius: .3em;} .job > div > i:before{padding-right: .3em;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> <section class="bg_search"> <div class="container"> <div class="section_title"> <h3>Vacatures in de kijker</h3> </div> <div class="featured_jobs"> <div class="slide"> <li class="featured_listing"> <h4> <a href="http://test.bloomford.be/Bloomford/job/">Business Development Manager</a> </h4> <div class="job"> <div class="job-list-location"><i class="icon-location6"></i>Antwerpen</div> <div class="job-list-date"><i class="icon-calendar6"></i>21 Feb 2018</div> <div class="job-list-salary"><i class="icon-money"></i>€3500 Per Maand</div> </div> <div class="featured_type_perm"><span>Voltijds</span></div> </li> </div> <div class="slide"> <li class="featured_listing"> <h4> <a href="http://test.bloomford.be/Bloomford/job/">Business Development Manager</a> </h4> <div class="job"> <div class="job-list-location"><i class="icon-location6"></i>Antwerpen</div> <div class="job-list-date"><i class="icon-calendar6"></i>21 Feb 2018</div> <div class="job-list-salary"><i class="icon-money"></i>€3500 Per Maand</div> </div> <div class="featured_type_perm"><span>Voltijds</span></div> </li> </div> <div class="slide"> <li class="featured_listing"> <h4> <a href="http://test.bloomford.be/Bloomford/job/">Business Development Manager</a> </h4> <div class="job"> <div class="job-list-location"><i class="icon-location6"></i>Antwerpen</div> <div class="job-list-date"><i class="icon-calendar6"></i>21 Feb 2018</div> <div class="job-list-salary"><i class="icon-money"></i>€3500 Per Maand</div> </div> <div class="featured_type_perm"><span>Voltijds</span></div> </li> </div> <div class="slide"> <li class="featured_listing"> <h4> <a href="http://test.bloomford.be/Bloomford/job/">Business Development Manager</a> </h4> <div class="job"> <div class="job-list-location"><i class="icon-location6"></i>Antwerpen</div> <div class="job-list-date"><i class="icon-calendar6"></i>21 Feb 2018</div> <div class="job-list-salary"><i class="icon-money"></i>€3500 Per Maand</div> </div> <div class="featured_type_perm"><span>Voltijds</span></div> </li> </div> <div class="slide"> <li class="featured_listing"> <h4> <a href="http://test.bloomford.be/Bloomford/job/">Business Development Manager</a> </h4> <div class="job"> <div class="job-list-location"><i class="icon-location6"></i>Antwerpen</div> <div class="job-list-date"><i class="icon-calendar6"></i>21 Feb 2018</div> <div class="job-list-salary"><i class="icon-money"></i>€3500 Per Maand</div> </div> <div class="featured_type_perm"><span>Voltijds</span></div> </li> </div> <div class="slide"> <li class="featured_listing"> <h4> <a href="http://test.bloomford.be/Bloomford/job/">Business Development Manager</a> </h4> <div class="job"> <div class="job-list-location"><i class="icon-location6"></i>Antwerpen</div> <div class="job-list-date"><i class="icon-calendar6"></i>21 Feb 2018</div> <div class="job-list-salary"><i class="icon-money"></i>€3500 Per Maand</div> </div> <div class="featured_type_perm"><span>Voltijds</span></div> </li> </div> </div> </div> </section>