javascript - 滑块和点之间的空白 [slick]
问题描述
当试图让我的光滑滑块响应时，我的内容/滑动元素和我无法删除的点之间出现空白。在全屏（非响应式视图）上查看页面时，点消失了（我知道为什么，这很好），空白消失了，但我的箭头在我的内容中。这是一张图片（N & O 是箭头，css 暂时缺失）：
空格问题：
箭头问题：
HTML 代码：
<section class="o-container u-mt-x2 u-bgcolor-white">
<div class="o-grid">
<div class="o-grid__col u-12/12">
<section class="o-container u-mt-x12">
<div class="c-card u-mb-x0">
<div class="o-container">
<div class="o-grid">
<div class="o-grid__col u-12/12 u-12/12@lg u-mb-x6 u-text-center"><h2
class=" u-text-center u-color-blue">Weitere Funktionen fur Anbieter</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod.</p>
</div>
</div>
</div>
<div class="o-grid__col u-12/12 u-mb-x6 o-grid--equal-height">
<div class="c-funcslider slick-slider">
<div style="height: 328px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 328px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam
voluptua.</p>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
</div>
</div>
<div class="o-container">
<div class="o-grid__col u-12/12 u-12/12@lg u-text-center "><p
class="p-mini text-center">
* Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
CSS：
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.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);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
max-width: fixed;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}
JS：
if ($('.c-funcslider').length > 0) {
$('.c-funcslider').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
}
}
]
});
}
我会说我需要在我的 css 或 html 中编辑它，但已经在这两个文件中尝试了很多东西..提前谢谢！
解决方案
推荐阅读
- android-camera2 - 2秒延迟点击抓图按钮后抓图
- javascript - 防止 TypeError 的方法：值不可迭代
- android - 在 exoplayer Android 中播放加密的 .m3u8 流
- sql - 如何在 SQL 中为密码构造正则表达式？
- sas - 合并日期
- java - Android SQLite：如果没有给出唯一键，如何确保批量上传和删除成功时的一致性？
- python - 如何在 Python 中削减所需的无限深度 JSON 数据？
- django - Django Graphene Relay order_by (OrderingFilter)
- mongodb - mongodb 文档中的大字段正在减慢聚合查询
- xslt-3.0 - XSLT 3 如何写一个包