問題描述：

       1、我使用axios非同步請求後臺的圖片進行渲染後不能實現迴圈輪播，也就是loop失效，但是靜態寫死的情況下不會出現這種問題。

       2、

分析：

        swiper的機制是：初始化的時候將swiper-warpperslide類下的最後一個swiper-slide塊克隆到第一個的位置，將第一個swiper-slide塊克隆島最後一個的位置，然後自動掃描swiper-warpperslide類下有多少個swiper-slide滑塊，則允許滑動多少個塊。因為我們非同步請求資料之前，swiper-warpperslide類下沒有swiper-slide滑塊，所以不會出現迴圈輪播的效果。

解決辦法：

        在axios請求後的成功回撥方法中初始化swiper方法。

        解決 滑動後不能自動輪播：將  disableOnInteraction:false 寫在autoplay內

以下是react專案中的程式碼：

 1 export default class Fime extends Component{
 2     constructor(){
 
 3         super();
 4         this.state={
 5             bannerImgArr:[]
 6         }
 7     }
 8     componentDidMount(){
 9         // 輪播
10         // axios請求後臺圖片
11         getBannerList().then((result)=>{
12            this.setState({
13                bannerImgArr:result
14            },()=>{
15             //    初始化swiper
16              new Swiper('.swiper-container', {
17                 observer: true,
18                 direction:'horizontal',
19                 loop: true,
20                 initialSlide:0,
21                 speed:1000,
22                 autoplay:{
23                     delay:2000,
24                     disableOnInteraction:false, //解決滑動後不能輪播的問題
25                 },
 
 
26                 // 注意分頁器的寫法：
27                 pagination: {
28                     el:'.swiper-pagination'
29                 },
30               })
31            })
32         })
33     }
34     render(){
35             let imgHtml=this.state.bannerImgArr.map((item,index)=>{
36                 return(
37                     <div className="swiper-slide"  key={index}>
38                         <img src={item} />
39                     </div>
40                 )
41             })
42         return (
43             <div className='film-page'>
44                 <div className='bannner-box'>
45                 {/* 輪播圖部分 */}
46                     <div className="swiper-container">
47                         <div className="swiper-wrapper">
48                             {imgHtml}
49                         </div>
50                         <div className="swiper-pagination"></div>
51                     </div>
52                 </div>
53             </div>
54         )
55     }
56 }

 效果展示：