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新文檔濫用Ref出現(xiàn)的問(wèn)題詳解，以及如何正確的使用Ref，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-07-07
本篇文章主要介紹了ReactNative Image組件使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
關(guān)于react的代理配置(可配置多個(gè)代理)
這篇文章主要介紹了關(guān)于react的代理配置(可配置多個(gè)代理)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React useMemo和useCallback的使用場(chǎng)景
這篇文章主要介紹了React useMemo和useCallback的使用場(chǎng)景，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
webpack4 + react 搭建多頁(yè)面應(yīng)用示例
這篇文章主要介紹了webpack4 + react 搭建多頁(yè)面應(yīng)用示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了React的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
下面小編就為大家?guī)?lái)一篇淺談React 屬性和狀態(tài)的一些總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
最新版React?Native環(huán)境搭建(親測(cè))
這篇文章主要介紹了最新版React?Native環(huán)境搭建，React Native的運(yùn)行需要依賴(lài)原生Android和iOS環(huán)境，因此需要分別安裝原生Android和iOS的開(kāi)發(fā)環(huán)境，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
react.js使用webpack搭配環(huán)境的入門(mén)教程
本文主要介紹了react 使用webpack搭配環(huán)境的入門(mén)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-08-08
react-router-dom?V6的配置使用實(shí)踐
本文主要介紹了react-router-dom?V6的配置使用實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05