react基于react-slick實(shí)現(xiàn)多圖輪播效果
更新時(shí)間：2022年07月14日 10:22:37 作者：阿湫·
React slick是一個(gè)使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
寫(xiě)在前面：
目前在項(xiàng)目中有輪播圖需求，但是antd組件不能實(shí)現(xiàn)多張圖片的輪播（或許是我沒(méi)找到相應(yīng)方法）
最后找到react-slick插件，能實(shí)現(xiàn)想要的效果
一、進(jìn)入官網(wǎng)查看文檔（Docs）
二、安裝插件（Quick Start）
//npm 安裝 npm install react-slick --save //yarn 安裝 yarn add react-slick
三、范例使用（Examples）
在examples里面有很多擴(kuò)展樣式可以使用
我們就按項(xiàng)目想要的效果來(lái)實(shí)現(xiàn)
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/風(fēng)景油畫(huà)10.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)9.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)8.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)7.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)6.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)5.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)4.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)3.jpg" alt="" width="250" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)2.jpg" alt="" width="250" height="170"/>
</div>
</Slider>
</div>
);
}
}
2、實(shí)現(xiàn)結(jié)果：
怎么和預(yù)期不一樣呢，但是仔細(xì)一看應(yīng)該是css的問(wèn)題
3、引入樣式：
我們回到官方docs中
//在頭部引入css import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css";
4、還是報(bào)錯(cuò)？
有錯(cuò)那就還是回到官方文檔中看看
5、運(yùn)行成功！
回到官網(wǎng)文檔，我們忽略了一步，在引入CSS之前需要下載 slick-carousel 插件
//下載 slick-carousel npm install slick-carousel --save
這時(shí)再引入css，還是報(bào)錯(cuò)
不急，把 ‘~’ 去掉就可以了
實(shí)現(xiàn)結(jié)果：
（手點(diǎn)的，速度有點(diǎn)快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 = {
//詳細(xì)的設(shè)置請(qǐng)查看官方API
dots: true, //圓點(diǎn)顯示（false隱藏）
infinite: true, //無(wú)限的環(huán)繞內(nèi)容
autoplay: true, //自動(dòng)播放，速度默認(rèn)為（3000毫秒）
speed: 500, //自動(dòng)播放速度（毫秒）
slidesToShow: 3, //在一幀中顯示3張卡片
slidesToScroll: 3 //一次滾動(dòng)3張卡片
};
return (
<div>
<Slider {...settings}>
<div>
<img src="./pic/風(fēng)景油畫(huà)10.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)9.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)8.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)7.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)6.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)5.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)4.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)3.jpg" alt="" width="300" height="170"/>
</div>
<div>
<img src="./pic/風(fēng)景油畫(huà)2.jpg" alt="" width="300" height="170"/>
</div>
</Slider>
</div>
);
}
}
其他包括左右跳轉(zhuǎn)的箭頭等等都可以實(shí)現(xiàn)，反正整個(gè)插件用下來(lái)感覺(jué)還是很好的，推薦給大家
總結(jié)
到此這篇關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的文章就介紹到這了,更多相關(guān)react多圖輪播效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React?中hooks之?React.memo?和?useMemo用法示例總結(jié)
React.memo是一個(gè)高階組件,用于優(yōu)化函數(shù)組件的性能,通過(guò)記憶組件渲染結(jié)果來(lái)避免不必要的重新渲染,合理使用React.memo和useMemo可以顯著提升React應(yīng)用的性能,本文介紹React?中hooks之?React.memo?和?useMemo用法總結(jié),感興趣的朋友一起看看吧2025-01-01
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2021-06-06
這篇文章主要簡(jiǎn)單分析了React中的EffectList，幫助大家更好的理解和學(xué)習(xí)使用React進(jìn)行前端開(kāi)發(fā)，感興趣的朋友可以了解下2021-04-04
React Hooks中模擬Vue生命周期函數(shù)的指南
React Hooks 提供了一種在函數(shù)組件中使用狀態(tài)和其他 React 特性的方式,而不需要編寫(xiě)類(lèi)組件,Vue 的生命周期函數(shù)和 React Hooks 之間有一定的對(duì)應(yīng)關(guān)系,本文給大家介紹了React Hooks中模擬Vue生命周期函數(shù)的指南,需要的朋友可以參考下2024-10-10
React內(nèi)部實(shí)現(xiàn)cache方法示例詳解
這篇文章主要為大家介紹了React內(nèi)部實(shí)現(xiàn)cache方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React實(shí)現(xiàn)阿里云OSS上傳文件的示例
這篇文章主要介紹了React實(shí)現(xiàn)阿里云OSS上傳文件的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
React.memo 和 useMemo 的使用問(wèn)題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁(yè)面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁(yè)面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問(wèn)題小結(jié),需要的朋友可以參考下2022-11-11
解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問(wèn)題
這篇文章主要介紹了解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
useCallback是react中比較重要的一個(gè)hook，useCallback 用來(lái)返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2022-11-11
react路由跳轉(zhuǎn)傳參刷新頁(yè)面后參數(shù)丟失的解決
這篇文章主要介紹了react路由跳轉(zhuǎn)傳參刷新頁(yè)面后參數(shù)丟失的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06