react基于react-slick实现多图轮播效果

更新时间：2022年07月14日 10:22:37 作者：阿湫·

React slick是一个使用React构建的轮播组件,下面这篇文章主要给大家介绍了关于react基于react-slick实现多图轮播效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

写在前面：

目前在项目中有轮播图需求，但是antd组件不能实现多张图片的轮播（或许是我没找到相应方法）

最后找到react-slick插件，能实现想要的效果

一、进入官网查看文档（Docs）

二、安装插件（Quick Start）

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

三、范例使用（Examples）

在examples里面有很多扩展样式可以使用

我们就按项目想要的效果来实现

1、直接copy代码：

这里我在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、实现结果：

怎么和预期不一样呢，但是仔细一看应该是css的问题

3、引入样式：

我们回到官方docs中

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

4、还是报错？

有错那就还是回到官方文档中看看

5、运行成功！

回到官网文档，我们忽略了一步，在引入CSS之前需要下载 slick-carousel 插件

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

这时再引入css，还是报错

不急，把 ‘~’ 去掉就可以了

实现结果：

（手点的，速度有点快QAQ）

源代码：

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>
      );
    }
  }

其他包括左右跳转的箭头等等都可以实现，反正整个插件用下来感觉还是很好的，推荐给大家

总结

到此这篇关于react基于react-slick实现多图轮播效果的文章就介绍到这了,更多相关react多图轮播效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React 中hooks之 React.memo 和 useMemo用法示例总结
React.memo是一个高阶组件,用于优化函数组件的性能,通过记忆组件渲染结果来避免不必要的重新渲染,合理使用React.memo和useMemo可以显著提升React应用的性能,本文介绍React 中hooks之 React.memo 和 useMemo用法总结,感兴趣的朋友一起看看吧
2025-01-01
React 高阶组件HOC用法归纳
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧
2021-06-06
简单分析React中的EffectList
这篇文章主要简单分析了React中的EffectList，帮助大家更好的理解和学习使用React进行前端开发，感兴趣的朋友可以了解下
2021-04-04
React Hooks中模拟Vue生命周期函数的指南
React Hooks 提供了一种在函数组件中使用状态和其他 React 特性的方式,而不需要编写类组件,Vue 的生命周期函数和 React Hooks 之间有一定的对应关系,本文给大家介绍了React Hooks中模拟Vue生命周期函数的指南,需要的朋友可以参考下
2024-10-10
React内部实现cache方法示例详解
这篇文章主要为大家介绍了React内部实现cache方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React实现阿里云OSS上传文件的示例
这篇文章主要介绍了React实现阿里云OSS上传文件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
React.memo 和 useMemo 的使用问题小结
随着代码的增加，每次的状态改变，页面进行一次 reRender ，这将产生很多不必要的 reRender 不仅浪费性能，从而导致页面卡顿，这篇文章主要介绍了React.memo 和 useMemo 的使用问题小结,需要的朋友可以参考下
2022-11-11
解决react antd Table组件使用radio单选框更新选中数据不渲染问题
这篇文章主要介绍了解决react antd Table组件使用radio单选框更新选中数据不渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React useCallback详细使用教程
useCallback是react中比较重要的一个hook，useCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用
2022-11-11
react路由跳转传参刷新页面后参数丢失的解决
这篇文章主要介绍了react路由跳转传参刷新页面后参数丢失的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06