繁体   English   中英

垂直滑动滑块:内容中心对齐

Vertical Slick slider: Content center align

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

这是我无法理解的事情。

对于我的旋转木马,我使用的是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> 

问题暂未有回复.您可以查看右边的相关问题.
2 光滑滑块垂直中心滑动问题

我在项目中光滑滑块的垂直滑块中使用居中模式。 他们网站上的演示始终在中间幻灯片中处于活动状态,总共有 3 张幻灯片。 但在我的情况下,我有 9 张幻灯片,当我应用它们的设置并制作幻灯片 9 时,它再次激活第二张幻灯片,但我需要它激活第 5 张幻灯片的中心。 我附上了我的项目截图和我的代码 Java ...

3 全屏滑动条将内容居中

我正在尝试将内容置于全屏滑动滑块( kenwheeler.github.io/slick/ )的中心, 我尝试使用弹性框,但内容仍保留在视口的边缘,这似乎与光滑的 CSS的position标签有关,但我不知道自己在做什么错。 这是我第一次使用flex,所以也许我遗漏了一些东西? ...

4 如何在光滑的滑块中垂直对齐图像

我有一个光滑的滑块,并且我想在a元素中垂直对齐图像。 我试过vertical-align:middle; 高度:100%; 并尝试了更多,但我还没有找到解决方案。 我也尝试使用&lt;span class="helper"&gt;&lt;/span就像我在stackoverflow( j ...

2019-05-07 09:29:50 2 129   html/ css
5 垂直对齐(中心)滑块不起作用

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

8 垂直滑动滑块滚动

我现在正在使用光滑的滑块,并且对于PC版本来说一切正常。 但是,当移动(从768px开始)时,幻灯片变得太长而无法读取所有信息,每次滚动1张幻灯片时,我们就会错过一部分信息。 http://bb1group.com/services/-在这里您可以看到问题。 是否有机会使滑块滚动半 ...

9 光滑的垂直滑块问题

我正在尝试实现这样一个光滑的垂直滑块: 在此处输入图片说明 到目前为止,我离得越近是这样的: 在此处输入图片说明 我目前使用的设置是: } 如果我将变量 slidesToShow 更改为 1,箭头会再次返回,但随后我需要将垂直填充更改为 100%,以便我可以看到所有幻灯片。 像那样: ...

10 光滑的滑块人工居中

我正在使用JQuery Slick Slider http://kenwheeler.github.io/slick/ ,它非常有效。 我还运行了一个单独的脚本,该脚本检查页面url,并且如果滑动滑块中的链接具有相同的url,则将current类添加到该特定链接。 该脚本如下: ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM