这篇文章主要介绍“React如何实现轮播图效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React如何实现轮播图效果”文章能帮助大家解决问题。
效果：
轮播功能用到了react-slick组件，安装：
计算
安全
数据库
网络和加速
企业服务
npm install react-slick --save
npm install slick-carousel安装完后需要在使用轮播图的页面上导入css文件：
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';swiper.js
import React, { Component } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
export default class SimpleSlider extends Component {
render() {
const settings = {
dots: true,
dotsClass:'slick-dots1',//自定义指示器的样式
// dots: {'dot-style':String},
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
height:500
};
return (
<div style={{margin:'50px 12px 40px 12px'}}>
<h3> Single Item</h3>
<Slider {...settings}>
<div>
<h4>1</h4>
<div style={{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-dots1 li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots1 li button
{
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-dots1 li button:hover,
.slick-dots1 li button:focus
{
outline: none;
}
.slick-dots1 li button:hover:before,
.slick-dots1 li button:focus:before
{
opacity: 1;
}
//未选中时的样式
.slick-dots1 li button: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-dots1 li.slick-active button:before
{
//opacity: .75;
color: #2183E2;
background-color: #2183E2;
border-radius: 5px;
}关于“React如何实现轮播图效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
