这是我无法理解的事情。
对于我的旋转木马，我使用的是Slick，当我运行水平模式并选择例如SlidesToShow: 2,时，这2张幻灯片正好居中，并且看不到其他幻灯片。
但是在这种情况下，我需要vertical: true,，但现在幻灯片无法很好地放置在轮播容器的中心。
我在做什么错或我忽略了什么？
$(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>