【React】我在React Slick遇到了困难

2 年 ago
科, 颖
1 minute

我想做的事

reactslick.gif

安装

npm install react-slick --save

npm install slick-carousel

实施 (shí shī)

import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Image from 'next/image'

export default function Carousel() {
  const settings = {
    dots: true,
    autoplay: true,
    infinite: true,
    speed: 1000,
  };

  const images = [
    {
      id: 1,
      src: "/images/ファイル名.jpg",
      alt: "Image 1"
    },
    {
      id: 2,
      src: "/images/ファイル名.jpg",
      alt: "Image 2"
    },
    {
      id: 3,
      src: "/images/ファイル名.jpg",
      alt: "Image 3"
    }
  ];

   const imageStyle = {
     width: '100%'
   };
  
  return (
    <Slider {...settings}>
      {images.map((image) => (
        <div key={image.id}>
          <Image 
            src={image.src}
            alt={image.alt}
            width={500}
            height={500}
            style={imageStyle}
          />
        </div>
      ))}
    </Slider>
  );
}

import Carousel from 'パス'

export default function Home() {
  return (
    <div>
      <Carousel />
    </div>
  );
}
間違えたポイント
＜前提＞使用的是 Next.js
图片保存位置：public/images/**.jpg

路径应该从 “public” 文件夹开始指定。
如果是相对路径，则在图片的开头加上 “/”
const images = [
{
id: 1,
src: “/images/ファイル名.jpg”,
alt: “Image 1”
}
];

以下是中文的同义句：

错误的要点

组件需要指定width和height。
如果想要100％大小，则需要另外准备样式，并通过style={}来应用。

const imageStyle = {
width: ‘100%’
};

 

请注意，此为中文的同义句。

错误

    • モジュールの宣言ファイルが見つかりません ～は暗黙的に’any’型になります。

 

    プロジェクト作成時、TypeScriptを選択するとなるっぽい。

具体内容忘记截图了。。。

import Slider from "react-slick";

由于错误的内容在导入中，按照那个进行命令执行。

npm i --save-dev @types/react-slick

请提供引用的资料。

    導入方法、よく使うコマンドが学べる。

 

    コマンドが豊富

 

    公式っぽいが分かりにくい

 

版本

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.2.3",
    "@types/node": "18.14.6",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "next": "13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@types/react-slick": "^0.23.10",
    "@types/slick-carousel": "^1.6.37",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  }
bannerAds