react 轮播图

import React from 'react';
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
 export default class Find extends React.Component{
                     constructor(props){
                           super(props);
                           this.state={
                                list:[1,2,3,6,6,8,9,9,42,5]
                           }
                     }
                     
                     componentDidMount(){
                             var mySwiper = new Swiper ('.swiper-container', {
//                                  direction: 'vertical', // 垂直切换选项
                                    loop: true, // 循环模式选项
                                   
                                    // 如果需要分页器
                                    pagination: {
                                      el: '.swiper-pagination',
                                    },
                                   
                                     autoplay:{
                                           delay:500, //500毫秒切换一次
                                     }
                                  })  
                     }
                     
                     //jsx
                     render(){
                           return (
                                
{ this.state.list.map((value,index)=>{ return(
{value}
) }) }
) } }

你可能感兴趣的:(前端)