react基于react-slick實現(xiàn)多圖輪播效果
更新時間：2022年07月14日 10:22:37 作者：阿湫·
React slick是一個使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實現(xiàn)多圖輪播效果的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
寫在前面：
目前在項目中有輪播圖需求，但是antd組件不能實現(xiàn)多張圖片的輪播（或許是我沒找到相應(yīng)方法）
最后找到react-slick插件，能實現(xiàn)想要的效果
一、進(jìn)入官網(wǎng)查看文檔（Docs）
二、安裝插件（Quick Start）
//npm 安裝 npm install react-slick --save //yarn 安裝 yarn add react-slick
三、范例使用（Examples）
在examples里面有很多擴(kuò)展樣式可以使用
我們就按項目想要的效果來實現(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、實現(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、還是報錯？
有錯那就還是回到官方文檔中看看
5、運(yùn)行成功！
回到官網(wǎng)文檔，我們忽略了一步，在引入CSS之前需要下載 slick-carousel 插件
//下載 slick-carousel npm install slick-carousel --save
這時再引入css，還是報錯
不急，把 ‘~’ 去掉就可以了
實現(xiàn)結(jié)果：
（手點的，速度有點快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, //圓點顯示（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)的箭頭等等都可以實現(xiàn)，反正整個插件用下來感覺還是很好的，推薦給大家
總結(jié)
到此這篇關(guān)于react基于react-slick實現(xiàn)多圖輪播效果的文章就介紹到這了,更多相關(guān)react多圖輪播效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了React新文檔濫用Ref出現(xiàn)的問題詳解，以及如何正確的使用Ref，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-07-07
本篇文章主要介紹了ReactNative Image組件使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了關(guān)于react的代理配置(可配置多個代理)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
React useMemo和useCallback的使用場景
這篇文章主要介紹了React useMemo和useCallback的使用場景，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
webpack4 + react 搭建多頁面應(yīng)用示例
這篇文章主要介紹了webpack4 + react 搭建多頁面應(yīng)用示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了React的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
下面小編就為大家?guī)硪黄獪\談React 屬性和狀態(tài)的一些總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了最新版React?Native環(huán)境搭建，React Native的運(yùn)行需要依賴原生Android和iOS環(huán)境，因此需要分別安裝原生Android和iOS的開發(fā)環(huán)境，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
react.js使用webpack搭配環(huán)境的入門教程
本文主要介紹了react 使用webpack搭配環(huán)境的入門教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
本文主要介紹了react-router-dom?V6的配置使用實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05