React如何实现轮播图效果(react,开发技术)

效果：

轮播功能用到了react-slick组件，安装：

npminstallreact-slick--savenpminstallslick-carousel

安装完后需要在使用轮播图的页面上导入css文件：

importSliderfrom'react-slick';import'slick-carousel/slick/slick.css';import'slick-carousel/slick/slick-theme.css';

swiper.js

importReact,{Component}from'react';importSliderfrom'react-slick';import'slick-carousel/slick/slick.css';import'slick-carousel/slick/slick-theme.css';exportdefaultclassSimpleSliderextendsComponent{render(){constsettings={dots:true,dotsClass:'slick-dots1',//自定义指示器的样式//dots:{'dot-style':String},infinite:true,speed:500,slidesToShow:1,slidesToScroll:1,height:500};return(<divstyle={{margin:'50px12px40px12px'}}><h3>SingleItem</h3><Slider{...settings}><div><h4>1</h4><divstyle={{background:'#25f5f5',height:'160px'}}>sdfkjsdlfjldskfjlksjdf</div></div><div><h4>2</h4></div><div><h4>3</h4></div><div><h4>4</h4></div><div><h4>5</h4></div><div><h4>6</h4></div></Slider></div>);}}

swiper.css

//轮播图下方dot样式.slick-dots1{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}.slick-dots1li{position:relative;display:inline-block;width:20px;height:20px;margin:05px;padding:0;cursor:pointer;}.slick-dots1libutton{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent;}.slick-dots1libutton:hover,.slick-dots1libutton:focus{outline:none;}.slick-dots1libutton:hover:before,.slick-dots1libutton:focus:before{opacity:1;}//未选中时的样式.slick-dots1libutton:before{font-family:'slick';font-size:8px;line-height:8px;position:absolute;top:0;left:0;width:20px;height:8px;content:'•';text-align:center;//opacity:.25;color:#CCCCCC;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}//选中的样式.slick-dots1li.slick-activebutton:before{//opacity:.75;color:#2183E2;background-color:#2183E2;border-radius:5px;}