国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

react基于react-slick實(shí)現(xiàn)多圖輪播效果

3403771864 / 1417人閱讀

　　在這里為大家介紹，實(shí)現(xiàn)多張圖自動(dòng)輪播可以用react-slick插件，下面一起看看：

　　一、進(jìn)入官網(wǎng)查看文檔（Docs）

　　react-slick官網(wǎng)

1.png

　　二、安裝插件（Quick Start）

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

　　三、范例使用（Examples）

　　在examples在擴(kuò)展樣式多樣，我們就按項(xiàng)目想要的效果來(lái)實(shí)現(xiàn)

2.png

　　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é)果：

　　這完全和自己想象不一樣，我們一起看看CSS

3.png

　　3、引入樣式：

　　我們回到官方docs中

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

　　4、繼續(xù)報(bào)錯(cuò)？

　　一起看看錯(cuò)的官方文檔

4.png

　　5、運(yùn)行成功！

　　其實(shí)在回到官網(wǎng)文檔，我們沒(méi)有注意到一步，在引入CSS之前需要下載 slick-carousel 插件

5.png

　　//下載 slick-carousel
　　npm install slick-carousel --save

　　這時(shí)再引入css，還是報(bào)錯(cuò)

　　不急，把 ‘~’ 去掉就可以了

　　實(shí)現(xiàn)結(jié)果：

　?。ㄊ贮c(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>
　　);
　　}
　　}

　　這個(gè)插件還可以左右跳轉(zhuǎn)的箭頭等等都可以實(shí)現(xiàn)，現(xiàn)在推薦給大家。


文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/127700.html

相關(guān)文章

  • React實(shí)現(xiàn)輪播圖效果的代碼

    　　　React實(shí)現(xiàn)輪播圖效果如下：　　終于可以用上react-slick組件，安裝：　　npminstallreact-slick--save 　　npminstallslick-carousel　　當(dāng)安裝完后，就要導(dǎo)入css文件，主要是為了使用輪播圖的頁(yè)面上：　　importSliderfrom'react-slick'; 　　import'slick-carousel...

    3403771864 評(píng)論0 收藏0

  • ReactNative開(kāi)發(fā)常用的三方模塊

    摘要：寫(xiě)在前面一個(gè)好的缺不了好的三方支持，生活在這個(gè)活躍的開(kāi)源社區(qū)，尋找合適的三方組件是一個(gè)開(kāi)發(fā)者最基本的能力。下面分享幾個(gè)我收集的三方模塊，希望對(duì)大家有點(diǎn)幫助。 寫(xiě)在前面 一個(gè)好的App缺不了好的三方支持，生活在ReactNative這個(gè)活躍的開(kāi)源社區(qū)，尋找合適的三方組件是一個(gè)開(kāi)發(fā)者最基本的能力。不過(guò)不積跬步，無(wú)以至千里，不積小流，無(wú)以成江海。下面分享幾個(gè)我收集的三方模塊，希望對(duì)大家有點(diǎn)幫...

    frolc 評(píng)論0 收藏0

  • react輪播圖組件react-slider-light

    摘要：首先說(shuō)一下，如果大家喜歡可直接收藏我這個(gè)項(xiàng)目的地址。因?yàn)橛锌赡苌习姹靖铝?，但是這邊就不更新了。如果有什么問(wèn)題，可以隨時(shí)問(wèn)，建議不要或者私信，直接上提，能把問(wèn)題記錄下來(lái)，方便其他人查找。 首先說(shuō)一下，如果大家喜歡可直接收藏我這個(gè)項(xiàng)目的github地址。https://github.com/951565664/... 因?yàn)橛锌赡躦ithub上版本更新了，但是這邊就不更新了。如果有什么問(wèn)題...

    leonardofed 評(píng)論0 收藏0

  • 面試官(6): 寫(xiě)過(guò)『通用前端組件』嗎?

    摘要：很久沒(méi)上掘金發(fā)現(xiàn)草稿箱里存了好幾篇沒(méi)發(fā)的文章最近梳理下發(fā)出來(lái)往期面試官系列如何實(shí)現(xiàn)深克隆面試官系列的實(shí)現(xiàn)面試官系列前端路由的實(shí)現(xiàn)面試官系列基于數(shù)據(jù)劫持的雙向綁定優(yōu)勢(shì)所在面試官系列你為什么使用前端框架前言設(shè)計(jì)前端組件是最能考驗(yàn)開(kāi)發(fā)者基本功的測(cè) 很久沒(méi)上掘金,發(fā)現(xiàn)草稿箱里存了好幾篇沒(méi)發(fā)的文章,最近梳理下發(fā)出來(lái) 往期 面試官系列(1): 如何實(shí)現(xiàn)深克隆 面試官系列(2): Event Bus...

    waltr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<