React realizes multi-picture carousel effect (based on react-slick)

Written in the front: At present, there is a need for carousels in the project, but the antd component cannot realize the carousel of multiple pictures (maybe I didn’t find the corresponding method). Finally, I
found the react-slick third-party package, which can achieve the desired effect

1. Enter the official website to view documents (Docs)

react-slick official website

insert image description here

2. Installation (Quick Start)

//npm 安装
npm install react-slick --save
//yarn 安装
yarn add react-slick

3. Example use (Examples)

There are many extended styles in the examples that can be used,
we will implement it according to the desired effect of the project
insert image description here

1. Copy the code directly:

Here I added the image inside the div

import React, {
    
     Component } from "react";
import Slider from "react-slick";

export default class MultipleItems extends Component {
    
    
    render() {
    
    
      const settings = {
    
    
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 3
      };
      return (
        <div>
          <Slider {
    
    ...settings}>
            <div>
                <img src="./pic/风景油画10.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画9.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画8.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
               <img src="./pic/风景油画7.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
               <img src="./pic/风景油画6.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画5.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
               <img src="./pic/风景油画4.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
               <img src="./pic/风景油画3.jpg" alt="" width="250" height="170"/>
            </div>
            <div>
              <img src="./pic/风景油画2.jpg" alt="" width="250" height="170"/>   
            </div>
          </Slider>
        </div>
      );
    }
  }

2. Realize the result:

Why is it different from expectations, but if you look carefully, it should be a css problem
insert image description here

3. Import style:

Let's go back to the official docs

//在头部引入css
import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

4. Still reporting an error?

If you make a mistake, go back to the official document
insert image description here

5. It runs successfully!

Going back to the official website documentation, we ignored a step, we need to download slick-carousel before introducing CSS
insert image description here

//下载 slick-carousel
npm install slick-carousel --save

At this time, when css is introduced again, an error is still reported
. Don't worry, just remove the '~'

Achievement result: (by hand, the speed is a bit faster QAQ)

insert image description here

source code:

import React, {
    
     Component } from "react";
import Slider from "react-slick";

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

export default class MultipleItems extends Component {
    
         
    render() {
    
    
      const settings = {
    
    
      //详细的设置请查看官方API
        dots: true, //圆点显示（false隐藏）
        infinite: true, //无限的环绕内容
        autoplay: true, //自动播放，速度默认为（3000毫秒）
        speed: 500, //自动播放速度（毫秒）
        slidesToShow: 3, //在一帧中显示3张卡片
        slidesToScroll: 3 //一次滚动3张卡片
      };
      return (
        <div>
          <Slider {
    
    ...settings}>
            <div>
                <img src="./pic/风景油画10.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画9.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画8.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画7.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画6.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画5.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画4.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画3.jpg" alt="" width="300" height="170"/>
            </div>
            <div>
                <img src="./pic/风景油画2.jpg" alt="" width="300" height="170"/>   
            </div>
          </Slider>
        </div>
      );
    }
  }

Others, including arrows for left and right jumps, etc., can be realized. Anyway, the whole plug-in feels good after using it. I recommend it to everyone. Welcome to point out any
mistakes in the content. Let's encourage each other!
insert image description here