简要解释如何使用React-Slick实现响应式设计

2 年 ago
清, 扬
1 minute

投稿的目的

在创建个人作品集网站时，我使用了React-Slick的滑动组件。然而，我发现关于React-Slick的响应式信息非常有限，这让我感到很困惑。因此，我决定在这里分享我所获得的经验和知识。

因此，这并不是对React-Slick进行全面说明的内容。

在React-Slick中进行配置

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

export default function SimpleSlider() {
  const settings = {
    dots: true, //スライダー下の点の表示/非表示
    infinite: true, //無限スクロールの有効/無効
    speed: 500, //スライド切り替えの速度
    slidesToShow: 1, //一度に表示するスライド数
    slidesToScroll: 1, //一度にスライドする枚数
  };
  
  return (
    <Slider {...settings}>
      <div>
        <h3>Slide 1</h3>
      </div>
      <div>
        <h3>Slide 2</h3>
      </div>
      <div>
        <h3>Slide 3</h3>
      </div>
      <div>
        <h3>Slide 4</h3>
      </div>
      <div>
        <h3>Slide 5</h3>
      </div>
    </Slider>
  );
}

以下是创建最常见的滑块的代码。
通常在React-Slick中，我们使用setting对象来实现各种设置。

通过写入设置对象，可以在React-Slick中进行各种设置，如“一次显示多少个幻灯片”和“幻灯片移动速度”。

响应式设置也是其中之一。

响应式设计的实施

所以我们会在实际中将Responsiveness的声明写入到设置对象中，添加一个名为responsive的属性，并将其值设为包含对象的数组。

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    
    // settingに追加します!
    responsive: [{}, {}, {}...]
  };

这个响应式数组对象表示每个响应式的标准和风格。可能看到实际的例子会更容易理解↓

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 4, //← デフォルトではこれ
  slidesToScroll: 1,

  // settingに追加します!
  responsive: [
    {
      breakpoint: 1024, // 1024px以下の画面幅に対する設定
      settings: {
	slidesToShow: 3,
      },
    },
    {
      breakpoint: 600, // 600px以下の画面幅に対する設定
      settings: {
	slidesToShow: 2,
      },
    },
    {
      breakpoint: 480, // 480px以下の画面幅に対する設定
      settings: {
	slidesToShow: 1,
      },
    },
  ],
};

我已按照如下进行简单的响应式设置。通过在每个响应式对象中设置slidesToShow，可以根据屏幕宽度来更改显示的幻灯片数量。

默认情况下会显示4张，并且每当达到断点时，它们将根据对象内的设置进行更改（断点只能以数字输入，单位仅支持像素）。

除了slidesToShow之外，您可以根据每个响应式进行几乎所有设置的更改。

实际应用的例子

我在我的个人作品集网站上使用React-Slick创建了一个滑动器，如果你想看到实际的效果和动态，请点击这里查看↓

以下是一些實際使用的例子。

bannerAds