下面光滑的垂直内容已被剪掉

Question

我在光滑中有 14 个项目/步骤，但是如果我单击最后一个点项目，它会显示步骤 13，并且步骤 14 已被切断。有什么想法或建议如何解决它吗？

将

slick-list

的高度设置为

100%

不适用。

见下图，step14的内容已经被截掉了。

您可以全页运行下面的

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>

Answer 1

我要回答我自己的问题，我知道的唯一修复方法是在

height

上添加

overflow-y

和

slick-slide

，如下所示。

.slider-style-2.slick-vertical .slick-slide {
    opacity:.5;
    cursor:pointer;
    height: 100px !important;
    overflow-y : auto !important;
}