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