第
React实现轮播图效果
本文实例为大家分享了React实现轮播图效果的具体代码，供大家参考，具体内容如下
效果：
轮播功能用到了react-slick组件，安装：
npminstallreact-slick--save
npminstallslick-carousel
安装完后需要在使用轮播图的页面上导入css文件：
importSliderfromreact-slick;
importslick-carousel/slick/slick.css;
importslick-carousel/slick/slick-theme.css;
swiper.js
importReact,{Component}fromreact;
importSliderfromreact-slick;
importslick-carousel/slick/slick.css;
importslick-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(
??????div50px12px40px12px}}
????????h2SingleItem/h2
????????Slider{...settings}
??????????div
????????????h31/h3
????????????div#25f5f5,height:160px}}sdfkjsdlfjldskfjlksjdf/div
??????????/div
??????????div
????????????h32/h3
??????????/div
??????????div
????????????h33/h3
??????????/div
??????????div
????????????h34/h3
??????????/div
??????????div
????????????h35/h3
??????????/div
??????????div
????????????h36/h3
??????????/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:20