文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-07-02 18:04

关注

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

一、进入官网查看文档(Docs)

react-slick官网

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

二、安装插件(Quick Start)

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

三、范例使用(Examples)

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

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

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

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的问题

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

3、引入样式:

我们回到官方docs中

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

4、还是报错?

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

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

5、运行成功!

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

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

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

这时再引入css,还是报错

不急,把 &lsquo;~&rsquo; 去掉就可以了

实现结果:

(手点的,速度有点快QAQ)

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

源代码:

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怎么实现多图轮播效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯