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

这篇文章主要介绍了React基于react-slick怎么实现多图轮播效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react基于react-slick怎么实现多图轮播效果文章都会有所收获，下面我们一起来看看吧。

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

react-slick官网

二、安装插件（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中

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

4、还是报错？

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

5、运行成功！

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

//下载 slick-carouselnpm 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-slick怎么实现多图轮播效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。