棱角分明的滑动响应断点 - 每张幻灯片分离成更小的组件

Question

我有一个带有Bulma CSS卡的光滑滑块。它一直工作，直到我到达断点并将我的幻灯片ToShow设置为不同的数字。卡片由标题和内容正文组成。当断点到达时，卡头和正文是单独的幻灯片。

slideConfig = {
    'slidesToShow': 4,
    'slidesToScroll': 1,
    'arrows': true,
    'swipeToSlide': true,
    'infinite': false,
    'responsive': [
      {
        'breakpoint': 767,
        'slidesToShow': 3
      }
    ]
  };

.HTML：

<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" responsive="breakpoints">
      <div ngxSlickItem *ngFor="let slide of slides" class="slide">
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">
              Box {{slide}}
            </p>
          </header>
          <div class="card-content">
            <div class="content">
              <p>Content for slide {{slide}}</p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
          </div>
        </div>
      </div>
</ngx-slick

在此处输入图像描述

Answer 1

试试这个

'responsive': [
  {
    'breakpoint': 767,
     'settings': {
      'slidesToShow': 3
            }
          }
        ]

您错过了设置部分。 如果你让它响应，你必须在它旁边添加设置和选项。 如果添加多个断点，请尝试此操作，

responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1
      }
    }
  ]

我希望这会起作用