背景【React實現一個簡易版Swiper】最近在公司內部進行一個引導配置系統的開發中 ， 需要實現一個多圖輪播的功能 。到這時很多同學會說了，“那你直接用swiper不就好了嗎？” 。但其實是，因為所有引導的展示都是作為npm依賴的形式來進行插入的，所以我們想要做的就是：盡量減少外部依賴以及包的體積 。所以，我們開始了手擼簡易版swiper之路 。
功能訴求首先，由于我們所有的內容都是支持配置的，所以首先需要支持停留時間(delay)的可配置；由于不想讓用戶覺得可配置的內容太多，所以我們決定當停留時間(delay)大于0時 ， 默認開啟autoplay 。
其次，在常規的自動輪播外，還需要滿足設計同學對于分頁器(Pagination)的要求，也就是當前的展示內容對應的氣泡(bullet)需要是一個進度條的樣式，有一個漸進式的動畫效果 。
最后，由于滑動效果實現起來太麻煩，所以就不做了 ， 其他的基本都是swiper的常規功能了 。
由此 ， 整體我們要開發的功能就基本確定，后面就是開始逐步進行實現 。
整體思路1、入參與變量定義由于需要用戶自定義配置整體需要展示的圖片，并且支持自定義整體的寬高與輪播時間(delay)；同樣，我們也應該支持用戶自定義輪播的方向(direction) 。
綜上我們可以定義如下的入參：
{  direction?: 'horizontal' | 'vertical';  speed?: number;  width: string;  height: string;  urls: string[];}而在整個swiper運行的過程中我們同樣是需要一些參數來幫助我們實現不同的基礎功能，比如
2、dom結構從dom結構上來說，swiper的核心邏輯就是，擁有單一的可視區，然后讓所有的內容都在可視區內移動、替換，以此來達到輪播的效果實現 。

文章插圖
那么如何來實現上的效果呢？這里簡單梳理一下html的實現：
// 可見區域容器<div id="swiper">  // 輪播的真實內容區 ， 也就是實際可以移動的區域  <div className="swiper-container" id="swiper-container">    // 內部節點的渲染    {urls.map((f: string, index: number) => (      <div className="slide-node">        <img src=https://www.huyubaike.com/biancheng/{f} />