我有14个项目/步骤在光滑,但是如果我点击最后一个点项目,它显示步骤13和步骤14已被切断。任何想法或建议如何修复它?
将slick-list
的高度设置为100%
不适用。
如下图所示,step14内容已被剪掉。
x1c 0d1x的数据
你可以在下面的snippet
中运行完整的页面。
$(function() {
$('.slider-for-2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
rows: 0,
asNavFor: '.slider-nav-2',
});
$('.slider-nav-2').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.slider-for-2',
dots: true,
appendDots: $('.g--dots-2'),
arrows: false,
infinite: false,
verticalSwiping: true,
focusOnSelect: true,
vertical: true,
rows: 0,
responsive: [{
breakpoint: 1400,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: true,
vertical: false,
fade: true,
}
}
]
});
});
body {
margin: 0;
font-family: Arial;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
a {
color: red;
}
.slider-style-2.slick-vertical .slick-slide {
opacity:.5;
cursor:pointer;
}
.slider-style-2.slick-vertical .slick-slide.slick-current {
opacity:1;
pointer-events: none;
}
.slider-style-2.slick-vertical .slick-slide.slick-current a {
pointer-events: auto !important;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css" type="text/css" rel="stylesheet" media="all">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-utilities.min.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="pb-5 position-relative">
<div class="row">
<div class="col-lg-6 col-xl-5 order-2 order-lg-1">
<div class="slider slider-nav-2 slider-style-2 g--text-center g--text-lg-start px-lg-3">
<div class="py-3">
<div class="font-size-14 fw-bold">Step 1</div>
<div class="font-size-18">Lorem ipsum dolor, sit amet consectetur, adipisicing</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 2</div>
<div class="font-size-18">Lorem ipsum dolor sit amet, consecte</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 3</div>
<div class="font-size-18">Lorem ipsum dolor sit amet, consectetur, a</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 4</div>
<div class="font-size-18">Lorem ipsum dolor sit amet, consectetur</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 5</div>
<div class="font-size-18">Lorem ipsum dol</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 6</div>
<div class="font-size-18">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat repellendus veritati</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 7</div>
<div class="font-size-18">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat repel</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 8</div>
<div class="font-size-18">Lorem ipsum dolor sit amet consecte</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 9</div>
<div class="font-size-18">Lorem ipsum dolor sit amet consectetur adipisicing</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 10</div>
<div class="font-size-18">Lorem ipsum dolor, sit amet consectetur adipisicing e</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 11</div>
<div class="font-size-18">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse inventore tempore laudantium veniam magnam, tenetur earum dolor officia quos</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 12</div>
<div class="font-size-18">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, beatae. Dignissimos, quaerat</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 13</div>
<div class="font-size-18">Lorem ipsum dolor si</div>
</div>
<div class="py-3">
<div class="font-size-14 fw-bold">Step 14</div>
<div class="font-size-18">You have now successfully activated your my Profile account.</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-7 order-1 order-lg-2">
<div class="slider slider-for-2 px-lg-3">
<div class="py-2">
<div class="text-center pe-lg-5">
image 1
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 2
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 3
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 4
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 5
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 6
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 7
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 8
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 9
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 10
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 11
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 12
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 13
</div>
</div>
<div class="py-2">
<div class="text-center pe-lg-5">
image 14
</div>
</div>
</div>
</div>
</div>
<div class="g--dots-2"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
1条答案
按热度按时间tkclm6bt1#
我要回答我自己的问题,我知道的唯一修复方法是在
slick-slide
上添加height
和overflow-y
,请参阅下面的更新代码。任何关于如何解决它的想法或建议仍然是开放的。
更新了
slick-slide
上的代码。字符串