React实现轮播图效果.docxVIP

第

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