这是我无法理解的事情。

对于我的旋转木马,我使用的是Slick,当我运行水平模式并选择例如SlidesToShow: 2,这2张幻灯片SlidesToShow: 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> 

  ask by Wouter translate from so

本文未有回复,本站智能推荐:

2回复

垂直对齐(中心)滑块不起作用

想象一下#bg是我的身体,我想为每张幻灯片制作滑块(光滑的滑块中心)。 该插件已经具有良好的高度,但我只是不能将它作为#bg的中心。 http://fiddle.jshell.net/obd45c4r/ 我尝试了垂直对齐技巧 但它没有帮助。
2回复

jQuery垂直滑块保持滑动

我创建了一个垂直内容滑块,它会向上/向下滑动鼠标滚轮使用,但它不是按预期工作,它开始滚动,并保持滚动... 它应该在每个滚动中显示一张幻灯片。 编辑:在每个滚动条中,它应显示为Slider Heading 1 ,然后下一个滚动条将显示Slider Heading 2 这是JSfidd
1回复

垂直内容滑块-JQuery

我正在尝试使用jQuery创建垂直内容滑块,但是我尝试创建但无法正常工作。 我正在尝试更改滚动上的幻灯片,不需要任何导航,只需要滚动上更改内容。 这是我的代码的JSfiddle function rotateImages(){ $(".slide-item").animate({t
1回复

如何垂直和水平中心光滑滑块?

我需要将光滑的滑动旋转木马完全置于有人正在查看的浏览器的中心位置。换句话说,无论是在桌面镶边还是iPhone X Max中查看它,滑块都位于视口的中间。 滑块粘贴在页面顶部。 我已经尝试了我能找到的所有解决方案,但无论我尝试什么,carosuel仍然卡在页面顶部。
1回复

我的垂直内容滑块中有一个错误

当我单击任一按钮时,我的内容滑块并不总是滑动到显示的哈希值。 我通过观看此视频Z找到了如何做到这一点Zhttps://www.lynda.com/jQuery-tutorials/Create-Interactive-Animated-Timeline-jQuery/124092-2.html
1回复

jQueryUI:多个垂直滑块在同一行上对齐

我一直在努力在同一行上获得多个垂直UI滑块。 我想要的如下:1.同一行上有多个垂直UI滑块。 假设我要4个垂直滑块连续放置。 2.我希望在用户移动每个滑块时显示数字 我一直遵循的代码为我提供了每个滑块上的数字。 但是,当前这些滑块在另一个滑块的下面(在同一列中)...如何将它们转换为
1回复

图像上的内容未垂直对齐

我正在尝试使我的div容器.home-img-text垂直位于其父div .home-img的中间。 我已经尝试将.home-img-text设置为position: absolute , relative ,我尝试了padding-top和其他方法,但它根本不会从其父div的顶部移动。
1回复

如何在浮动的div中垂直对齐内容?

我使用1140px网格系统在流体div中的标题旁边浮动图像,如下所示: 对于智能手机,页眉被推到图像下方并与容器的左侧对齐,而在台式机上,所需的效果是始终使页眉位于图像的右侧并垂直居中于扩展/收缩的图像高度。 有没有办法仅使用CSS和HTML来做到这一点? 有没有简单的JS / jQue